更改數組角度 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
  }