ANULGAR => 尝试获取在 ngFor 中生成的模板值以通过 onlick 事件发送

Question

我正在我的模板中动态生成一个 html 元素列表，我希望能够创建一个“删除按钮”，但在这个阶段我只是想在 console.log 一个唯一的值从那里开始工作。

这是我正在迭代以创建值的变量：

eventList: { day: number, name: string, description: string }[] = [
  { "day": 0, "name": "Available", "description": "awdwadawdwa" },
  { "day": 1, "name": "Ready", "description": "awdwadawdwa" },
  { "day": 2, "name": "Started", "description": "awdwadawdwa" }
];

这是模板中的迭代：

<div *ngFor="let item of eventList"> 
 <div class="card" style="width: 18rem;  margin-top: 2%;">
 <div class="card-body">
    <h5 class="card-title">{{item.name}}</h5>
    <h6 class="card-subtitle mb-2 text-muted"> {{item.day}} </h6>
    <p class="card-text"> {{item.description}}  </p>
    <button style="color: red;"  [(ngModel)]="item.name" (click)="delete(item.name)"> Delete this event </button>
    </div>
  </div>

我将值传递给的函数：

delete(id){
  console.log(id)
}

我已经尝试了这方面的变化，但这些似乎都不起作用。 直接将它传递给函数，如：

(点击)="删除({{item.name}})"

似乎也不起作用。

谢谢。

Answer 1

尝试(change)="delete(item.name)"

Answer 2

您不需要按钮上的模型绑定。

<button (click)="delete(item.name)"> Delete this event </button>

演示： https : //stackblitz.com/edit/angular-rjhzxl

Answer 3

只是我的一个错误，我没有注意对象中键名的实际值。