如何使用 typescript 在控制台中打印 ngFor 循环值？答案

【问题标题】：How do I use typescript to print ngFor loop values in console?如何使用 typescript 在控制台中打印 ngFor 循环值？
【发布时间】：2020-04-18 21:36:20
【问题描述】：

我正在使用 ngFor 打印出存储在 firestore 中的一组值。数据按我想要的方式打印，但我希望用户能够“收藏”某个项目。现在，我只是在尝试获取正确的数据，然后再尝试将其添加到他们在 Firestore 中最喜欢的集合中。我的问题是每次点击收藏按钮时，元素的值都不会改变。即使 html 不同，它也会每次打印出集合的第一个“名称”值。另外，我将 Ionic 与 AngularFire2 一起使用。这是我页面的 html 和 typescript 函数。

 <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 循环中为每张卡片打印的第一个值。它看起来像这样： {名称：“引体向上”，描述：“引体向上是一种上身复合拉动练习……引体向上以手掌向前的姿势进行。”，图片：“图像”}

【问题讨论】：

标签： angular typescript ionic4 ngfor

【解决方案1】：

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

但是你可以通过item直接获取函数中的值：

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

【讨论】：