模板形式 angular 结合 *ngFor答案

【问题标题】：template form angular combined with *ngFor模板形式 angular 结合 *ngFor
【发布时间】：2020-08-31 07:52:54
【问题描述】：

我想为即将到来的每场比赛显示一个表格：所以我有一个*ngFor 为每场比赛创建一个带有提交按钮的表单。第一个问题：如果我单击提交，表单日志仅显示第一个提交表单的值。它看起来像有角度的，.. 或者我对 *ngFor 感到困惑并提交。

我是否必须添加一些东西以便 Angular 知道提交按钮链接到这个表单？

第二个问题：

如何将{{match.id}} 信息添加到每个创建的表单中？

HTML

<table>
  <tbody>
    <tr ngtemplate *ngFor="let match of matches">
      <td>{{ match.matchdate | date: "EEEE, MMMM d, y, h:mm" }}h</td>

      <td scope="row">
        <a href="#" class="text-dark">
          {{ match.hometeam_id.name }} - {{ match.awayteam_id.name }}
        </a>
      </td>

      <td>
        <form class="form-inline" (ngSubmit)="onSubmit()" #f="ngForm">
          <select 
            class="custom-select mb-2 mr-sm-2 mb-sm-0" 
            type="number" 
            id="homeTeamBet" 
            ngModel
            name="homeTeamBet _{{ match.id }}" 
            required
          >
            <option *ngFor="let num of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" [value]="num">
              {{ num }}
            </option>
          </select>
          <select 
            class="custom-select mb-2 mr-sm-2 mb-sm-0" 
            type="number" 
            id="awayTeamBet" 
            ngModel 
            name="awayTeamBet"
            required
          >
            <option *ngFor="let num of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" [value]="num">
              {{ num }}
            </option>
          </select>
          <button class="btn" [disabled]="!f.valid" type="submit">
            <i class="fa fa-check"></i>
          </button>
        </form>
      </td>

      <td>{{ match.status }} /// {{ match.id }}</td>
    </tr>
  </tbody>
</table>

【问题讨论】：

标签： angular forms ngfor

【解决方案1】：

一种方法是使用按钮单击而不是表单提交。以下是代码：

.html

<button class="btn" [disabled]="!f.valid" (click)="onSubmit(match)">
            <i class="fa fa-check"></i>

.ts

onSubmit(match){
// write you code here to use match.id etc.
}

【讨论】：