Как использовать машинопись для печати значений ngFor l oop в консоли? - PullRequest
Новая
       33

Как использовать машинопись для печати значений ngFor l oop в консоли?

0 голосов
/ 19 апреля 2020

Я использую ngFor, чтобы распечатать коллекцию значений, которые хранятся в firestore. Данные печатаются так, как я хочу, но я хочу, чтобы пользователь мог «добавить в избранное» определенный элемент. Сейчас я просто пытаюсь получить правильные данные, прежде чем добавить их в свою любимую коллекцию в firestore. Моя проблема в том, что каждый раз, когда нажимается любимая кнопка, значение элемента не меняется. Он выводит первое «имя» значения коллекции каждый раз, хотя html отличается. Также я использую Ioni c с AngularFire2. Вот моя страница html и функция машинописи. 

 <ion-card *ngFor="let item of workouts">
    <span>
      <ion-card>
        <img src="/assets/exercise1.jpg" alt="Picture not available"/>
        <ion-card>
          <h3 id="woDescript">{{item.Description}}</h3>
          <div class="btn">
            <ion-button (click)="faveButton()">
              <ion-icon name='star' slot="start"></ion-icon>
              Favorite
            </ion-button>
          </div>

        </ion-card>

        <ion-card-header>
          <ion-card-title id="workoutName">{{item.Name}}</ion-card-title>
        </ion-card-header>
      </ion-card>
    </span>
  </ion-card>

faveButton(){
      var record ={};
      var name = (document.getElementById('workoutName').innerHTML)
      var descript = (document.getElementById('woDescript').innerHTML);
      var image = "image";
      record['Name'] = name;
      record['Descript'] = descript;
      record['Image'] = image;
      console.log(record);
    }

Когда я печатаю на консоль, я просто получаю первое значение, которое печатается в для l oop для каждой карточки. Это выглядит так: {Имя: «Подтягивание», Дескриптор: «Подтягивание - это сложное упражнение на подтягивание верхней части тела… подтягивание выполняется с положением ладони вперед»., Изображение: «изображение»}

1 Ответ

0 голосов
/ 19 апреля 2020

Вы используете id для получения значений, которые должны быть уникальными. Если существует более одного элемента с одинаковым id, вы получите первый.

Но вы можете напрямую получить значения в своей функции, передав item: 

<ion-button (click)="faveButton(item)">
...
faveButton(item) { 
  // use item properties here
}
...