在组件方法中使用 *ngFor 值答案

【问题标题】：Using *ngFor values in component method在组件方法中使用 *ngFor 值
【发布时间】：2018-11-24 19:11:04
【问题描述】：

我试图从 *ngFor 循环中获取 id 值到我的组件中的方法中，以便删除特定对象我的代码如下所示：

html:

<tr *ngFor="let c of myCompanyArray">
    <td>{{c.id}}</td>
    <td>{{c.companyName}}</td>
    <td>{{c.password}}</td>
    <td>{{c.email}}</td>
    <td>
      <a href="" class="tooltip">
        <i class="fas fa-user-edit"></i>
        <span class="tooltiptext">edit company</span>
      </a>
    </td>
    <td>
      <a  class="tooltip" >
        <i class="far fa-trash-alt" (click)="sendIdForDelete({{c.id}})"></i>
        <span class="tooltiptext">delete company</span>
      </a>
    </td>
  </tr>

组件：

sendIdForDelete(compid){
console.log("company id is : " + compid.value);
///this.dataService.deleteCompany(compid.value);

}

我在 (click)="sendIdForDelete({{c.id}}) 或 (click)="sendIdForDelete(c.id)" 中尝试过的任何语法我总是不确定非常感谢您的帮助，谢谢

【问题讨论】：

这是因为您编写了“compid.value”，而不仅仅是“compid”。我假设 compid 是一个原语（字符串/数字），所以你不需要 .value 属性来访问它。

标签： html angular ngfor

【解决方案1】：

您应该在您的 html 中调用 sendIdForDelete(c.id) 并在您的组件中更改您的方法，如下所示

sendIdForDelete(compid: number){
console.log("company id is : " + compid);
}

在这种情况下，您将 id（数字或字符串）传递给您的组件（.ts 文件），而您的函数 (sendIdForDelete) 应该只获得一个 id。

现在你可以在函数中使用对应的 id 做任何事情。

【讨论】：

【解决方案2】：

您不应该在模板中使用插值，只要不使用 {{}},

<i class="far fa-trash-alt" (click)="sendIdForDelete(c.id)"></i>

并且在TS内部不要使用值，因为你已经在传递一个数字，

sendIdForDelete(compid:any){
   console.log("company id is : " + compid);
}

【讨论】：