Question

我试图制作一个搜索框，搜索产品名称并输出产品卡片。我有一个具有搜索输入的MenuComponent，并在数据库中查找产品。（它保持300毫秒，因此它不必为每次击键请求）。 getLikeName()会返回在其名称上搜索到的内容的产品。

 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文件（我使用Angular Material）：

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

提前感谢您的回答。

Answer 1

从示例代码中，似乎'products'变量的范围仅限于'this.productContainer'而不是'this'。因此，获得更新的不是绑定到HTML的“产品”变量。

当您从displayProducts（）方法中打印时，console.log仍然有效。

如果您提供代码的插件，会更容易。

如果显示方法没有执行除显示之外的任何操作，我建议您将代码更改为以下内容：

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

Answer 2

看起来产品位于productContainer.products。您可以在html中使用.作用域，因此请将您的html更改为*ngFor="let product of productContainer.products"。

* ngFor搜索结果未更新Angular 2

2 个答案: