Angular 9：如何根据下拉值动态添加行答案

【问题标题】：Angular 9: how to dynamically add rows based on drop down valueAngular 9：如何根据下拉值动态添加行
【发布时间】：2020-10-17 12:40:38
【问题描述】：

我目前正在使用 Material 学习 Angular9，我这里有一个用于抽奖的示例表格。用户填写抽奖信息，他们从下拉列表中选择这次抽奖有多少奖品以及谁是获胜者。我选择了一个下拉值，我希望“获胜者”行生成与我的下拉选择值一样多的行。因此，如果有 3 个最高奖项，则应该有 3 个获胜者行。如何根据从下拉列表中选择的值动态生成行数？

<mat-card class="example-card">
  <form [formGroup]="minisForm" (ngSubmit)="onFormSubmit()">
    <mat-form-field class="example-full-width">
      <mat-label>Raffle ID</mat-label>
      <input matInput placeholder="Mini ID" formControlName="miniId" [errorStateMatcher]="matcher">
      <mat-error>
        <span *ngIf="!minisForm.get('miniId').valid && minisForm.get('miniId').touched">Please enter Mini ID</span>
      </mat-error>
    </mat-form-field>
    <mat-form-field class="example-full-width">
      <mat-label>Host Name</mat-label>
      <input matInput placeholder="Item Name" formControlName="hostName" [errorStateMatcher]="matcher">
      <mat-error>
        <span *ngIf="!minisForm.get('hostName').valid && minisForm.get('hostName').touched">Please enter Host Name</span>
      </mat-error>
    </mat-form-field>

    <mat-form-field class="example-full-width">
      <mat-label>Top prizes</mat-label>
      <mat-select [formControl]="numberOfWinners">
        <mat-option value="option">1</mat-option>
        <mat-option value="option">2</mat-option>
        <mat-option value="option">3</mat-option>
        <mat-option value="option">4</mat-option>
        <mat-option value="option">5</mat-option>
      </mat-select>
      <mat-error *ngIf="!minisForm.get('spots').valid">Please enter number of Winners</mat-error>
    </mat-form-field>

    <mat-form-field class="example-full-width">
      <mat-label>Winner</mat-label>
      <input matInput type="number" placeholder="Winner" formControlName="winner" [errorStateMatcher]="matcher">
      <mat-error>
        <span *ngIf="!minisForm.get('winner').valid && minisForm.get('winner').touched">Please enter Winner</span>
      </mat-error>
    </mat-form-field>

    <div class="button-row">
      <button type="submit" [disabled]="!minisForm.valid" mat-flat-button color="primary"><mat-icon>save</mat-icon></button>
    </div>
  </form>
</mat-card>

【问题讨论】：

标签： javascript angular angular-material mean-stack angular9

【解决方案1】：

你可以这样做：https://stackblitz.com/edit/angular-ivy-ftizjs

我只是在下拉列表中捕获 change 事件并获取值。然后我创建一个大小等于下拉值的数组，填充任何内容，这样我就可以在 *ngFor 上对其进行迭代。

然后，使用 *ngFor 动态创建行。

希望它有意义！

【讨论】：