javascript - ANGULAR => 尝试获取 ngFor 中生成的模板值并通过 onclick 事件发送

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)"