* ngFor搜索結果不更新角2

我試圖做一個搜索框，它尋找產品名稱並輸出產品卡作爲結果。我有一個具有搜索輸入的MenuComponent，並在數據庫中查找產品。（它持有300毫秒，所以它不必爲每個擊鍵提出請求）。 getLikeName()將返回具有其名稱上搜索內容的產品。* ngFor搜索結果不更新角2

search(searchInput: string){ 
    if(this.interval != null){ 
     clearInterval(this.interval); 
    } 
    this.interval = setTimeout(() => { 
     this.productHttpService.getLikeName(searchInput, 20).subscribe(
     (products: any[]) => this.productContainer.displayProducts(products) 
    ); 
    }, 300); 
    }

displayProducts函數更新產品列表。我有console.log的結果，並有效地產品回來了。但是該列表並未在網站上更新。

products: any[]; 

displayProducts(products: any[]){ 
    this.products = products; 
    console.log(products); 
}

這是HTML文件（我使用的角度材質）：

<md-grid-list cols="4" rowHeight="1:2" class="size"> 
    <md-grid-tile *ngFor="let product of products" class="separation"> 
     <md-card class="example-card"> 
     <md-card-header> 
      <div md-card-avatar class="example-header-image"></div> 
      <md-card-title>${{product.price}}</md-card-title> 
      <md-card-subtitle>{{product.name}}</md-card-subtitle> 
     </md-card-header> 
     <img md-card-image [src]="product.imgUrl" style="width:300px; height:225px"> 
     <md-card-content> 
      <p> 
      {{product.description}} 
      </p> 
     </md-card-content> 
     <md-card-actions> 
      <button md-button (click)="sidenav.open(); addToCart(product)">ADD TO CART</button> 
     </md-card-actions> 
     </md-card> 
    </md-grid-tile> 
    </md-grid-list>

預先感謝您的回答。

來源

2017-04-25 Tomas Piaggio

您是否嘗試過僅將產品綁定到視圖？ –

只是一個建議 - 而不是使用setInterval，你可以使用rxjs中的debounceTime運算符 –

從示例代碼看來，'產品'變量的範圍僅限於'this.productContainer'而不是'this'。所以獲得更新的不是綁定到HTML的'產品'變量。

從displayProducts（）方法中打印它時，console.log仍然可以正常工作。

如果您提供代碼的重載，會更容易。

如果顯示方法是不是做顯示以外任何事情，我會建議你改變你的代碼如下：

this.interval = setTimeout(() => { 
    this.productHttpService.getLikeName(searchInput, 20).subscribe(
    (products: any[]) => {this.products = products}); 
}, 300);

來源

2017-04-26 07:55:03

它看起來像產品位於productContainer.products。您可以在HTML中使用.範圍，因此請將您的html更改爲*ngFor="let product of productContainer.products"。

來源

2017-05-22 14:04:19 HaveSpacesuit

* ngFor搜索結果不更新角2

回答

相關問題