В моем проекте angular, почему индексная переменная моих итерационных (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 в консоль и получил false, хотя элемент с индексом 0 должен был быть true, но он был false. Я вошел card.index, this.displayedCardIndex в консоль и получил 0 0 , но второй 0 был фиолетовым, сообщая мне, что это другой тип, числовой тип, а первый был белым, типа string . Чтобы подтвердить это, я зарегистрировал консоль typeof card.index , и она подтвердила мне, что это была строка.

Почему это делает ее строкой? Я предполагаю, что это связано с тем, что оно исходит из шаблона HTML. Есть ли способ заставить angular передавать ее как тип number, когда это так, чтобы мне не приходилось анализировать ее каждый раз, когда я ее использую, или делать что-то подобное в CardComponent? Для меня это просто похоже на взлом, и я предпочел бы этого не делать.

1. Разве это не должно быть *ngFor="let card of cardsInfo; let i = index" ? Я никогда не видел синтаксиса, который вы показали

2. @ShamPooSham нет, смотрите Здесь

3. @ShamPooSham Я изначально сделал это таким образом, но изменил его, когда посмотрел документацию, на которую ссылается Kaustubh Badrike.

Ответ №1:

Когда вы используете handlebars, значение принимается как что-то для отображения. Чтобы привязать фактическое значение, попробуйте

 [index]="i"