* ng在修改对象后不在子组件中更新

Question

我使用下面的代码使用* ngFor绑定数据。 - 子组件＆＃34; my-productDetails ＆＃34;。

import { Component, Input, NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from "@angular/platform-browser";
@Component({

    selector: 'my-productDetails',
    styleUrls: ['styles.css'],
    template: `

                     <h5>Product Details</h5> <br><br>
<div class="fontStyle1">
                  <table>
                        <tr>
                          <th>Name</th>  <th>Price</th>  <th>Store Name</th>  <th>Model</th> 
                        </tr>

                        <tr  *ngFor="let obj of ProductDetails">
                           <td>{{obj.name}}</td>
                           <td>{{obj.price | currency:'USD':true }}</td>
                           <td>{{obj.store}}</td>
                           <td> {{obj.model}}</td>
                        </tr>
                   </table>
</div>
               `,
})

export class ProductDetailsComponent {

    public ProductDetails = [
    { name: 'Hp Laptop', price: '500', store: 'Best Buy', model: '15-BS013DX' },
    { name: 'Dell Laptop', price: '700', store: 'Amazon', model: 'I7378-3000SLV-PUS' },
    { name: 'Lenovo Laptop', price: '670', store: 'Target', model: '81A40025US' } ];

    constructor() {
        console.log("getProducts constructor");
        this.getProducts();
    }
    getProducts() {
        console.log("getProducts");

            return this.ProductDetails;
        }

父组件：

import { Component } from '@angular/core';
import { ProductDetailsComponent } from './app.productDetails.component';
@Component({
    selector: 'my-productHeader',
    template: `
                <div>
                       <h5>Product Header</h5>
                </div>
                <div>
                        Select Product <select>
                                            <option *ngFor="let prod of ProductList" value={{prod.model}}>
                                                                    {{prod.name  }}
                                            </option>

                                       </select>
                </div>
<div>
<button type="text" (click)="searchProduct('Hp Laptop')">Search</button>
</div>

                <div>
                         <my-productDetails></my-productDetails>
                </div>
`,
})

export class ProductHeader {

    public ProductList: Object = {};
    public order: string = 'name';
    constructor() {

        let prodlist: ProductDetailsComponent = new ProductDetailsComponent();
        this.ProductList = prodlist.getProducts();
        console.log(this.ProductList[0].name);
    console.log("Product Header 2");
}

    searchProduct(Name: string) {
        let prodlist: ProductDetailsComponent = new ProductDetailsComponent();
         prodlist.SearchProduct(Name);
    }
}

在第一次加载数据中成功绑定。

我点击按钮时有搜索功能。我想基于产品搜索将数据绑定到表。为什么表没有第二次更新。它显示所有项目。

SearchProduct(name: string) {
    console.log(name);
    let obj = this.ProductDetails.filter(m => m.name == 'Dell Laptop');
    this.ProductDetails = obj;
    console.log(this.ProductDetails);// I can see in log Dell Product, that means search method is working fine, only view is not updating .

}

而且我检查了我的搜索代码是否返回了预期的行。我正在将此组件与其他组件（如子组件）一起使用。

我的问题是如何在Click Button Search上更新子组件？