更改数组角度 11 时 UI 闪烁

Question

我正在联系一个由服务器更新的值的数组，但 UI 模板在 concat 上闪烁。应该做些什么来避免这种情况。

   @Input('companies')   set setCompanyArray(companies) {
     this.showNotFound = false;> 
     if (!companies) {
       return;
     }
     companies.map((company) => {
       company['searchFilter'] = this.lastSearchedText;
    });
    if (!this.companies) {
       this.companies = companies;
       return;
     }
     this.companies = this.companies.concat(companies);

Answer 1

每次为公司变量分配新值时，您都会看到闪烁，因为 Angular 再次呈现整个列表。 你应该添加 trackByFn 来告诉 Angular 是重新渲染整个列表还是只重新渲染新项目。

 <li *ngFor="let company of companies;trackBy: trackByFn"></li>

  trackByFn(index, company: Company) {

    return company.id // or whatever is an unique identificator for a company
  }