从 Angular 8 升级到 Angular 10 后，“CustomGameComponent”类型上不存在属性“i”

Question

当我使用 Angular 8 时，此代码编译时没有出现错误。我升级到 Angular 10，创建了一个新项目，当我复制并粘贴代码时出现此错误，并且输入上的标签显示“Player NaN”。 FormsModule 和 ReactiveFormModule 包含在我的 app.module.ts 中。

错误信息：

src/app/features/modules/games/custom-game/custom-game.component.html:4:34 - error TS2339: Property 'i' does not exist on type 'CustomGameComponent'.

4             <mat-label>Player {{ i + 1 }}</mat-label>
                                   ~

  src/app/features/modules/games/custom-game/custom-game.component.ts:6:16
    6   templateUrl: './custom-game.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component CustomGameComponent.
src/app/features/modules/games/custom-game/custom-game.component.html:5:73 - error TS2339: Property 'i' does not exist on type 'CustomGameComponent'.

5             <input matInput type="text" [formControl]="players.controls[i]">
                                                                          ~

  src/app/features/modules/games/custom-game/custom-game.component.ts:6:16
    6   templateUrl: './custom-game.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component CustomGameComponent.
src/app/features/modules/games/custom-game/custom-game.component.html:7:65 - error TS2339: Property 'i' does not exist on type 'CustomGameComponent'.

7         <button mat-mini-fab color="warn" (click)="removePlayer(i)">
                                                                  ~

  src/app/features/modules/games/custom-game/custom-game.component.ts:6:16
    6   templateUrl: './custom-game.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component CustomGameComponent.

HTML 文件：

<div class="body">
    <div ngFor="let control of players.controls; index as i">
        <mat-form-field>
            <mat-label>Player {{ i + 1 }}</mat-label>
            <input matInput type="text" [formControl]="players.controls[i]">
        </mat-form-field>
        <button mat-mini-fab color="warn" (click)="removePlayer(i)">
            <mat-icon>delete</mat-icon>
        </button>
    </div>
    <button mat-raised-button color="accent" (click)="addPlayer()">Add Player</button>
</div>

TS：

import { Component, OnInit } from '@angular/core';
import { FormArray, FormControl } from '@angular/forms';

@Component({
  selector: 'custom-game',
  templateUrl: './custom-game.component.html',
  styleUrls: ['./custom-game.component.scss']
})
export class CustomGameComponent implements OnInit {

  players = new FormArray([]);

  constructor() { }

  ngOnInit() {
  }

  addPlayer() {
    this.players.push(new FormControl(''));
  }

  removePlayer(index) {
    this.players.removeAt(index);
  }

}

Answer 1

我认为你必须使用 let i=index;

Answer 2

这是

*ngFor="let control of players.controls; index as i"

不是

ngFor="let control of players.controls; index as i"

https://angular.io/api/common/NgForOf