时间戳

首页 > 解决方案 > 如何使用 typescript 在控制台中打印 ngFor 循环值？

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

问题描述

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

标签： angulartypescriptionic4ngfor

解决方案

您id用于获取值，该值必须是唯一的。如果有多个相同的元素id，您将获得第一个。

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

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

推荐阅读