时间戳

首页 > 解决方案 > 在我的角度项目中，为什么我的迭代（ngFor）组件的索引变量变成了字符串而不是数字

angular - 在我的角度项目中，为什么我的迭代（ngFor）组件的索引变量变成了字符串而不是数字

问题描述

我创建了组件中所有数据的迭代，因此每个元素都使用 *ngFor 成为一张卡片。

<ng-container *ngFor="let card of cardsInfo; index as i">
  <app-card
    id="{{ card.id }}"
    index="{{ i }}"
    [url]="url"
    [cardLocation]="isDisplayed(card.id)"
  >

如您所见，索引是 CardComponent 的输入。

最初，我@Input() index: number;在 CardComponent 中，但是当我尝试访问该数字并将其与另一个数字一起使用时（例如：card.index === this.displayedCardIndex - 1，该应用程序将无法运行。我登录card.index === 0控制台并得到错误，即使索引为 0 的元素应该一直是真的，但它是假的。我登录card.index, this.displayedCardIndex到控制台并得到0 0，但第二个 0 是紫色的，告诉我这是一个不同的类型，一个数字类型，第一个是白色的，类型为字符串。为了确认这一点，我在控制台登录typeof card.index并它向我证实这是一个字符串。

为什么要把它变成一个字符串？我认为这是因为它来自 HTML 模板。有没有办法让 Angular 将它作为类型号传递，这样我就不必每次使用它时都解析它或在 CardComponent 中做类似的事情？对我来说，这感觉就像是一种黑客行为，并且宁愿不这样做。

标签： angularngfor

解决方案

当您使用车把时，该值被视为要显示的内容。要绑定实际值，请尝试

[index]="i"

推荐阅读