我有一组称为报告的数据,其中包含一组网络(report.networks)。在返回网络数组之前,我有 model.ts 来操作它。我做了一个 ngFor 来迭代网络数据以显示工作正常的详细信息。但是,在 ngFor 中添加 matToolTips 不会显示。
组件.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>
组件.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);
}
}
报告.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
}
}
正如这里提到的https://github.com/angular/material2/issues/10039 https://github.com/angular/material2/issues/10039
在 ngFor 中使用函数时,该数组会被一遍又一遍地创建实例,这会导致多个问题,例如 matToolTip 不显示以及性能问题。
我解决这个问题的另一种方法是更改我的 model.ts 文件。所以下面我将一个变量分配给函数的结果。然后我在 ngFor 中使用这个变量而不是直接在函数中使用。
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
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)