ANGULAR => 尝试获取在 ngFor 中生成的模板值，以通过 onclick 事件发送答案

【问题标题】：ANULGAR => trying to get a template value generated in an ngFor to be sent by an onlick eventANGULAR => 尝试获取在 ngFor 中生成的模板值，以通过 onclick 事件发送
【发布时间】：2020-03-20 08:27:01
【问题描述】：

我正在我的模板中动态生成一个 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}})"

似乎也不起作用。

谢谢。

【问题讨论】：

delete 是保留关键字，用于从对象中删除属性的运算符，尝试为您的函数使用其他名称吗？
@shrys 我认为这不是问题。当然 delete 是对象原型的函数。但是，如果您有具有该名称的变量和函数，那不会造成问题。

标签： javascript angular binding

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

为什么要在按钮上添加模型绑定。我试过你提供的代码。它在那部分抛出错误。
因为这是漫长的一天。

【解决方案3】：

您不需要对按钮进行模型绑定。

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

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

【讨论】：