javascript Angular 14 -如何在向列表添加新项时动态呈现html/DOM

thtygnil  于 2023-06-28  发布在  Java
关注(0)|答案(1)|浏览(132)

我有一个列表的项目,我循环通过和显示在一个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的内部。
希望这是有意义的,提前感谢

i86rm4rw

i86rm4rw1#

在.ts文件中:

addCut(): void {
  this.details.cutsAndPrices.push(price); // price is your new element you want
}

相关问题