如何通过单击（添加）按钮启用具有值的行

Question

在订票应用程序中，我们确实有一个添加多人的选项，同样，我应该为用户提供一个选项来添加他的可用时间段......他点击添加新按钮以添加他的第二个时间段

        <div class="row" >
      <div class="col-md-3 mb-3">
        <mat-form-field>
          <input matInput [min]="startDate" [matDatepicker]="picker" placeholder="Meeting date" name="meetingDate" required>
          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>

      </div>

      <div class="col-md-2 mb-3">
        <mat-form-field>
          <mat-select placeholder="Pick Hour" name="meetingHour" required>
            <mat-option *ngFor="let timeVal of meetingHours" [value]="timeVal.value">
              {{ timeVal.viewValue }}
            </mat-option>
          </mat-select>
        </mat-form-field>

      </div>
      <div class="col-md-2 mb-3">
        <mat-form-field>
          <mat-select placeholder="Min(s)" name="meetingMin" required>
            <mat-option *ngFor="let timeVal of meetingMins" [value]="timeVal.value">
              {{ timeVal.viewValue }}
            </mat-option>
          </mat-select>
        </mat-form-field>

      </div>
      <div class="col-md-2 mb-3">
        <mat-form-field>
          <mat-select placeholder="AM/PM" name="meetingAMPM"  required>
            <mat-option *ngFor="let timeVal of meetingAMPMs" [value]="timeVal.value">
              {{ timeVal.viewValue }}
            </mat-option>
          </mat-select>
        </mat-form-field>

      </div>

      <div class="col-md-3 mb-3">
        <mat-form-field>
          <mat-select placeholder="Pick right Timezone" name="meetingTz"  required>
            <mat-option *ngFor="let timeVal of timezones" [value]="timeVal.value">
              {{ timeVal.display }}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <!--<button class="add" (click)="add()" ><img src="assets/images/plus.png"></button>-->
      </div>
    </div>

按钮

 <div class="row">
      <div class="col-md-12 mb-3" id="addNew">
        <input type="submit" class="btn btn-primary addnew pull-right" (click)="add()" value="Add New">
      </div>

    </div>

默认情况下会显示上面的行。单击“添加新”时，应再次显示该行

Answer 1

你能做的是...... 您可以使用角度 ngfor 指令来迭代行..您可以使用添加按钮将行推送到数组..

例子：

html:

<div class="row" *ngFor="let row of rows">
 {{row.name}}
</div>

打字稿：

//row array
rows:any[] = [];

//add button event
    add(){
     rows.push({name:'this is a row'});
    }

您可以使用任何类型的数组来列出行..

更多细节... https://angular.io/guide/displaying-data#showing-an-array-property-with-ngfor