Ionic / Angular - ngFor передать item.id при событии (клик)

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

Я пытаюсь передать item.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) = "подробности (item.id)" - правильный синтаксис

— 07.12.2018 11:58

Вам не нужно помещать item.id в двойные фигурные скобки для интерполяции. (click) = "подробности (item.id)"

— 07.12.2018 12:31

Это основные вещи angular ... сначала обратитесь к официальному документу

— 07.12.2018 12:36

html angular typescript ionic-framework

07.12.2018 11:55

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

834

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Пройдите без фигурных скобок

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

07.12.2018 11:56

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

<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 Локальные переменные

07.12.2018 11:58

Вы находитесь в области действия 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>

07.12.2018 12:08

Другие вопросы по теме

Загрузка текстур в THREE.js и Angular

Angular 7: передовая практика смешивания jQuery с Typescript?

Как изменить функции angular 7 для реализации поддержки языка RTL?

Почему NgbModal выдает ошибку при закрытии / закрытии?

Изменить цвет точки фона во время выполнения для angular ng2-charts / chartjs

Использование angular7, как получить обновленное значение базы данных после вызова компонента с помощью серверного API

ЕСЛИ я нажимаю на значок изображения, значок должен быть интерактивным, и должно открываться всплывающее [диалоговое окно] для загрузки нового изображения

У меня проблема с иконкой в браузере IE в проекте Angular 5

Angular 7 как указать папку для изображений в dist

Angular подписаться на изменение объекта @Input

Ionic / Angular - ngFor передать item.id при событии (клик)

Ответы 3

Другие вопросы по теме

Похожие вопросы