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

我使用下面的代码来使用* ngFor绑定数据 . - Child Component "my-productDetails “ .

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

Parent Component:

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 .

}

而且我检查了我的搜索代码是返回预期的行 . 我正在使用此组件与另一个组件，如子组件 .

我的问题是 How to update a child component on Click Button Search?