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

您可以做的是.... 您可以使用angular 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

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

1 个答案: