我有一个列表的项目，我循环通过和显示在一个div。这些在初始页面加载时呈现。

<button (click)="addCut()" mat-raised-button color="primary">Add New Cut</button>
<button (click)="addCut()" mat-raised-button color="primary">+</button>
<div class="cutcontainer" style="margin-top:10px;" *ngFor="let i of details.cutsAndPrices; let index = index;">
  <mat-form-field class="cutitem">
    <input matInput placeholder="Cut"> {{i.type}}
  </mat-form-field>
  <mat-form-field style="margin-right:15px;">
    <input matInput placeholder="Price"> {{i.price}}
  </mat-form-field>
  <button (click)="removeCut(index)" mat-raised-button color="warn" id="{{i.type}}">-</button>
</div>

我正在寻找一种方法，当我点击第一个按钮时，它调用addCut（），将一个项目添加到列表中，然后更新页面上的html。
或者，如果更简单，只需添加

<mat-form-field class="cutitem">
  <input matInput placeholder="Cut">
</mat-form-field>
<mat-form-field style="margin-right:15px;">
  <input matInput placeholder="Price">
</mat-form-field>
<button (click)="removeCut(index)" mat-raised-button color="warn" id="">-</button>

当我点击addCut()的时候，包含div的内部。
希望这是有意义的，提前感谢