Angular Material matToolTip 在使用 ngFor 函数时不显示 [英] Angular Material matToolTip does not display when using ngFor function
问题描述
我有一组称为报告的数据,其中包含一组网络 (report.networks).在我返回它之前,我有model.ts 来操作networks 数组.我做了一个 ngFor 来迭代网络数据以显示工作正常的细节.但是,在 ngFor 中添加 matToolTips 不会显示.
component.html
<span matTooltip="Tooltip Works">Tooltip Works</span><div *ngFor="let network of report.networks"><span matTooltip="工具提示不起作用!">工具提示不起作用</span>
component.ts
import { Report } from './../../core/models/report/report.model';@成分({选择器:'app-report-detail',templateUrl: './report-detail.component.html',styleUrls: ['./report-detail.component.scss']})导出类 ReportDetailComponent 实现 OnInit {报告:报告;构造函数(私有路由:ActivatedRoute){}ngOnInit() {this.report = this.route.snapshot.data.report;控制台日志(this.report);}}
report.model.ts
导出类报告{网络?:任何=空;构造函数(数据?:报告){如果(数据){this.deserialize(data);}}私有反序列化(数据:报告){const 键 = Object.keys(this);for (const key of keys) {如果 (data.hasOwnProperty(key)) {这个[key] = 数据[key];}}}获取网络(){让 n = this.networks;//一些操作返回 n}}
正如这里提到的 https://github.com/angular/material2/issues/10039
在 ngFor 中使用函数时,会反复创建数组实例,这会导致多个问题,例如 matToolTip 不显示以及性能问题.
我解决这个问题的另一种方法是更改我的 model.ts 文件.所以在下面我为函数的结果分配了一个变量.然后我直接在函数的 ngFor istead 中使用这个变量.
导出类报告{网络?:任何=空;//风俗自定义网络?:任何=空;构造函数(数据?:报告){如果(数据){this.deserialize(data);this.customNetworks = this.generateNetworks()}}私有反序列化(数据:报告){const 键 = Object.keys(this);for (const key of keys) {如果 (data.hasOwnProperty(key)) {这个[key] = 数据[key];}}}生成网络(){让 n = this.networks;//一些操作返回 n}}
I have a set of data called reports which contain an array of networks (report.networks). I have model.ts to manipulate the networks array before i return it back. I do an ngFor to iterate over the network data to display the details which works fine. However, adding a matToolTips within the ngFor does not get displayed.
component.html
<span matTooltip="Tooltip Works">Tooltip Works</span>
<div *ngFor="let network of report.networks">
<span matTooltip="Tooltip Does NOT work!">Tooltip Does NOT work</span>
</div>
component.ts
import { Report } from './../../core/models/report/report.model';
@Component({
selector: 'app-report-detail',
templateUrl: './report-detail.component.html',
styleUrls: ['./report-detail.component.scss']
})
export class ReportDetailComponent implements OnInit {
report: Report;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.report = this.route.snapshot.data.report;
console.log(this.report);
}
}
report.model.ts
export class Report {
networks?: any = null;
constructor(data?: Report) {
if (data) {
this.deserialize(data);
}
}
private deserialize(data: Report) {
const keys = Object.keys(this);
for (const key of keys) {
if (data.hasOwnProperty(key)) {
this[key] = data[key];
}
}
}
get networks() {
let n = this.networks;
//some manipulation
return n
}
}
As mentioned here https://github.com/angular/material2/issues/10039
The array is instance being created over and over again when using a function in a ngFor which causes multiple issues like matToolTip not displaying as-well as performance issues.
Another way i got around this is to change my model.ts file. So below im assigning a variable to the result of the function. Then i use this variable inside the ngFor isntead of the function directly.
export class Report {
networks?: any = null;
//custom
customNetworks? : any = null;
constructor(data?: Report) {
if (data) {
this.deserialize(data);
this.customNetworks = this.generateNetworks()
}
}
private deserialize(data: Report) {
const keys = Object.keys(this);
for (const key of keys) {
if (data.hasOwnProperty(key)) {
this[key] = data[key];
}
}
}
generateNetworks() {
let n = this.networks;
//some manipulation
return n
}
}
这篇关于Angular Material matToolTip 在使用 ngFor 函数时不显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!