Ionic / Angular - ngFor 在（点击）事件上移交 item.id答案

【问题标题】：Ionic / Angular - ngFor hand over item.id on (click) eventIonic / Angular - ngFor 在（点击）事件上移交 item.id
【发布时间】：2018-12-07 19:08:00
【问题描述】：

我有一个列表，我想在单击按钮时更改卡片的高度（按钮在卡片上），但是，我该怎么做？

我尝试在点击事件上交出 item.id 并在函数中使用 id，但是当我想使用 (click="details({{item.id}})" 时出现错误。

那么我该如何解决这个问题呢？

这里是html代码：

 <ion-card>
    <ion-card-content class="date-card">
        <h1 class="date">{{date}}</h1>
    </ion-card-content>
</ion-card>
<ion-card *ngFor="let item of items" id="{{item.id}}" >
  <ion-card-content class="content-box">
    <ion-card-title class="title">{{item.label}}</ion-card-title>
    <h2 class="md-text"><ion-icon name="time" ></ion-icon>  {{item.time_start}}</h2>
    <h2 class="md-text"><ion-icon name="calendar" ></ion-icon>  {{item.date_start}}</h2>
    <h2 class="md-text"><ion-icon name="compass" ></ion-icon>  {{item.location_text}}</h2>
  </ion-card-content>
  <div class="icon-div">
    <button class="icon-button">
      <ion-icon class="icon-button-icon" name="star"></ion-icon>
    </button>
    <button class="icon-button" (click)="details()">
      <ion-icon class="icon-button-icon" name="arrow-down" ></ion-icon>
    </button>
    <button class="icon-button">
      <ion-icon class="icon-button-icon" name="share"></ion-icon>
    </button>
  </div>
</ion-card>

对不起我的英语不好^^

【问题讨论】：

(click)="details(item.id)" 是正确的语法
您不需要将 item.id 放在双花括号内进行插值。 (click)="details(item.id)"
这是angular的基本东西...请先参考官方文档

标签： html angular typescript ionic-framework

【解决方案1】：

不带大括号传递它

(click)="details(item.id)".

【讨论】：

【解决方案2】：

你在 ngFor 的范围内所以你可以使用 item variable ，只要你在 ion-card body 中你就可以使用 item variable

<ion-card *ngFor="let item of items" id="{{item.id}}" >
  ...
      <button class="icon-button" (click)="details(item.id)">
        <ion-icon class="icon-button-icon" name="arrow-down" ></ion-icon>
      </button>
...
</ion-card>

ngFor Local variables

【讨论】：

【解决方案3】：

你在 ngFor 的范围内，所以你可以使用 item 变量

<ion-card>
        <ion-card-content class="date-card">
            <h1 class="date">{{date}}</h1>
        </ion-card-content>
    </ion-card>
    <ion-card *ngFor="let item of items" **[id]="item.id"** >
      <ion-card-content class="content-box">
        <ion-card-title class="title">{{item.label}}</ion-card-title>
        <h2 class="md-text"><ion-icon name="time" ></ion-icon>  {{item.time_start}}</h2>
        <h2 class="md-text"><ion-icon name="calendar" ></ion-icon>  {{item.date_start}}</h2>
        <h2 class="md-text"><ion-icon name="compass" ></ion-icon>  {{item.location_text}}</h2>
      </ion-card-content>
      <div class="icon-div">
        <button class="icon-button">
          <ion-icon class="icon-button-icon" name="star"></ion-icon>
        </button>
        <button class="icon-button" **(click)="details(item.id)"**>
          <ion-icon class="icon-button-icon" name="arrow-down" ></ion-icon>
        </button>
        <button class="icon-button">
          <ion-icon class="icon-button-icon" name="share"></ion-icon>
        </button>
      </div>
    </ion-card>

【讨论】：