Angular Material matToolTip 在使用 ngFor 函数时不显示

Question

我有一组称为报告的数据，其中包含一组网络 (report.networks)。在我返回它之前，我有model.ts 来操作networks 数组。我做了一个 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);

    }

}

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
    }
}

Answer 1

正如这里提到的 https://github.com/angular/material2/issues/10039

当在 ngFor 中使用函数时，会反复创建数组实例，这会导致多个问题，例如 matToolTip 不显示以及性能问题。

我解决这个问题的另一种方法是更改​​我的 model.ts 文件。所以下面我将一个变量分配给函数的结果。然后我直接在函数的 ngFor istead 中使用这个变量。

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
    }
}