Angular9：如何根据下拉值动态添加行

Question

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

<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>

Answer 1

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

我只是在下拉列表中捕获 change 事件并获取值。然后我创建一个大小等于下拉值的数组，填充任何东西，这样我就可以在 *ngFor.

上迭代它

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

希望它有意义！

Angular9：如何根据下拉值动态添加行

Angular 9: how to dynamically add rows based on drop down value

javascript

angular

angular-material

mean-stack

angular9