Question

我有一组称为报告的数据，其中包含一系列网络（report.networks）。我有model.ts来操作网络数组，然后再返回它。我做一个ngFor迭代网络数据，以显示工作正常的细节。但是，在ngFor中添加matToolTips不会显示。

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

Answer 1

如此处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
    }
}

Answer 2

由于您的网络getter每次返回一个新的集合，工具提示总是重新关闭，而ngFor在DOM中重新创建新元素。

但如果在返回的网络中有标识符，则可以解决此问题。

ngFor *指令接受trackBy函数，该函数将用于检查现有呈现项目与必须显示的项目的标识。如果此函数返回的值对于现有项和要创建的项是相同的，则angular将保留现有项，因此不会销毁它。

指南中的an exemple以及the internal mechanism和TrackByFn interface

的文档

    in the template : 

    <div *ngFor="let network of networks(); trackBy: trackByFn">
       <span matTooltip="Tooltip Does NOT work!">Tooltip Does NOT work</span>
    </div>
    ...
    In the component: 

    networks () { let n = [{ name: 'toto', id: 1},{ id: 2 } , { id: 3 } ]; return n;  };
    trackByFn = (index: number, item: any) => item.id;

以下是实现简单trackByFunction的stackblitz，您可以看到使用trackBy的工具提示

编辑：如果您没有任何ID，您可以使用数组的索引，ergo：

trackByFn = (index: number, item: any) => index;

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

2 个答案: