如何使用打字稿在控制台中打印 ngFor 循环值？

Question

我正在使用 ngFor 打印出存储在 firestore 中的 collection 个值。数据按我想要的方式打印，但我希望用户能够 "favorite" 某个项目。现在，我只是想在尝试将其添加到 firestore 中他们最喜欢的 collection 之前获取正确的数据。我的问题是每次单击收藏夹按钮时，元素的值都不会改变。即使 html 不同，它每次都会打印出 collection 的第一个 "name" 值。另外，我将 Ionic 与 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);
    }

当我打印到控制台时，我只得到在 for 循环中为每张卡片打印的第一个值。它看起来像这样： {名称："Pull-up"，描述："A pull-up is an upper-body compound pulling exerci… pull-up performed with a palms-forward position."，图片："image"}

Answer 1

您正在使用 id 获取值，该值必须是唯一的。如果有多个元素具有相同的id，你得到第一个。

但是您可以通过传递 item:

直接获取函数中的值

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

如何使用打字稿在控制台中打印 ngFor 循环值？

How do I use typescript to print ngFor loop values in console?

angular

typescript

ionic4

ngfor