在里面使用 ngModel<p> 標簽 Angular 8</p>

Question

Html 代碼：

<div class="col-md-4" *ngFor="let card of allCards">
<p class="card-text">Card Color: {{card.color}}</p>
<button type="button" class="btn btn-sm btn-primary product-btn" (click)="addCard()">Add Card</button>"

在這里，我還想將值“card.color”綁定到另一個變量（可能使用 ngModel），以便我可以在 angular 8 的 typescript 文件中使用它。

我嘗試了以下但不工作：

<p class="card-text" [(ngModel)]="cardColor">Card Color: {{card.color}}</p>

Answer 1

您可以將內容發送到按鈕click事件的處理程序。

模板 (*.html)

<div class="col-md-4" *ngFor="let card of allCards">
<p class="card-text">Card Color: {{card.color}}</p>
<button 
  type="button" 
  class="btn btn-sm btn-primary product-btn" 
  (click)="addCard(card.color)"
>
  Add Card
</button>

Controller (*.ts)

addCard(color: any) {
  // use `color` here
}