从 *ngFor 生成的输入标签中获取值

Question

我有一个组件使用 *ngFor 在表单上创建输入标签。它基本上查看一组玩家并为每个玩家创建 18 个输入标签。最后，我有一个提交按钮。此按钮启动一个方法，该方法应该遍历每个生成的输入标签，收集它们的值，并将它们添加到分数数组中。但是，当我尝试收集这些值时，我收到一条错误消息，指出这些值是空的。我如何遍历并收集输入标签中的每个值？这可能吗？这是代码：

HTML（ids的最后一个数字一直递增到id="id{{player.index}}-18"）

...<mat-tab-group class="tabs">
        <mat-tab label="1">
          <div *ngFor="let player of playerAndID">
            <h3>{{ player.name }}</h3>
            <mat-form-field class="scoreInput">
              <input matInput placeholder="Score" id="id{{player.index}}-1">
            </mat-form-field>
          </div>
        </mat-tab>
        <mat-tab label="2">
          <div *ngFor="let player of playerAndID">
            <h3>{{ player.name }}</h3>
            <mat-form-field class="scoreInput">
              <input matInput placeholder="Score" id="id{{player.index}}-2">
            </mat-form-field>
          </div>
        </mat-tab>...

...<mat-tab label="18">
          <div *ngFor="let player of playerAndID">
            <h3>{{ player.name }}</h3>
            <mat-form-field class="scoreInput">
              <input matInput placeholder="Score" id="id{{player.index}}-18">
            </mat-form-field>
          </div>
          <div class="submit-game-button">    
              <button mat-raised-button (click)="addScoresToArray()" class="submit" type="button" routerLink="/results">Submit</button>
          </div>
        </mat-tab>

TS

addScoresToArray() {
    for (var i = 0; i < this.playerAndID.length; i++) {
      for (var j = 1; j < 19; j++) {
        var score = (<HTMLInputElement>document.getElementById("id{{i}}-{{j}}")).value;
        this.data.addToScores(parseInt(score), i);
      }
    }
  }

Answer 1

https://angular.io/api/forms/FormArray

您可以在 formGroups 中使用表单数组..

从 *ngFor 生成的输入标签中获取值

Getting value from input tags generated by *ngFor

angular

typescript

input

ngfor