嵌套组件在角度9中刷新

Question

我有一个组件，其中有一个子组件。每当我单击保存按钮时，都需要刷新子组件。

子组件包含一个装载有API详细信息的表，因此当我更新父组件中的详细信息并单击“保存”时，子组件内的表必须刷新。

父组件：

<form [formGroup]="unitmaster"  class="form-horizontal">
    <div class="card crd_hed">
        <div class="card-header">Unit Master</div>
        <div class="card-body">

            <div class="form-group row">
                <div class="col-md-6">
                    <div class="form-group row" >
                        <label class="col-md-4 control-label" for="description"> Description</label>
                        <div class="col-md-8">
                            <input id="description" formControlName="description" type="text" class="form-control txt-field">
                        </div>
                    </div>

                 <div class="form-group row">
                        <div class="col-md-4"></div>
                    <div class="col-md-8">

                           <input  class="btn btn-primary botn_style" (click)="onUnitSubmit()"value="Save" type="submit">

                    </div>
                </div>
                </div>         
            </div>
       </div>
    </div>
 </form>

子组件

<table class="table ">
    <thead>
        <tr>
            <th style="width: 200px;"> Description</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let master of unitObj">
        <td style="width:200px;">{{master.description}} </td>

        <td style="width: 60px;"><a (click)="editUnitButton(master)"> <img src="../../assets/edit-black.png" style="width:20px; height:20px;"></a></td>
            <td style="width: 60px;"><a (click)="deleteUnitMaster(master.id)" > <img src="../../assets/delete-512.png" style="width:20px; height:20px;"></a></td>
        </tr>
    </tbody>

</table>

ts文件

export class UnitmasterComponent implements OnInit {

  constructor(private httpclient:HttpClient,private fb:FormBuilder) { }
  unitObj;
  unitmaster:FormGroup
  apiurl='http://server:809/api/MUnitMasters'
  btnname = "save";
  ngOnInit(): void {

     this.httpclient.get(this.apiurl).subscribe(
      res =>{
        this.unitObj=res;
      }
  )

  this.unitmaster=this.fb.group({
    id:[],
    description:['']
  });
 }

  onUnitSubmit()
  {
    let ndata=this.unitmaster.value
    let id=ndata.id;

    if(id==null)
    {
      let fdata={
        // "id":ndata.id,
        "description":ndata.description
      }
      console.log(fdata);
      this.httpclient.post(this.apiurl, fdata).subscribe(response => {
        console.log(response)
      })
    }
    else
    {
      let fdata={
        "id":ndata.id,
        "description":ndata.description
      }

      console.log(fdata);
      this.httpclient.put(this.apiurl+'/'+id,fdata).subscribe(res => {
      console.log(res);
});
    }
  }

  editUnitButton(master){
    this.btnname = "Update";
    this.unitmaster.patchValue({
      id:master.id,
      description:master.description,
    })
  }

  deleteUnitMaster(id){
    this.httpclient.delete(this.apiurl+'/'+id).subscribe(res => {
        console.log(res);
      });


  }

}