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

Question

我创建了组件中所有数据的迭代，因此每个元素都成为使用 *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 的输入。

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

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

Answer 1

当你使用车把时，价值被当作要显示的东西。要绑定实际值，请尝试

[index]="i"

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

In my angular project, why is the index variable of my iterated(ngFor) components becoming a string instead of a number

angular

ngfor