Ionic / Angular - ngFor вручает item.id при (щелчке)

Question

У меня есть список, и я хочу изменить высоту карты, когда нажимаю на кнопку (кнопка на карте), но как мне это сделать?

Я пытаюсь передатьitem.id для события click и использования идентификатора в функции, но я получаю ошибку, когда хочу использовать (click="details({{item.id}})".

Так как же я могу решить эту проблему?

здесьhtml code:

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

И извините за мой плохой английский ^^

Answer 1

Вы находитесь в области действия ngFor, поэтому вы можете использовать переменную элемента, пока вы находитесь в теле ионной карты, вы можете использовать переменную элемента

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

ngДля локальных переменных

Answer 2

Вы находитесь в области действия ngFor, поэтому вы можете использовать переменную элемента

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

Answer 3

передать его без фигурных скобок

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