材料设计中的角度下拉

时间:2019-03-29 15:08:24

标签: angular material-design dropdown mat-table

我在Mat表中有以下下拉列表。

<ng-container matColumnDef="loadType">
                    <mat-header-cell class="loadType" *matHeaderCellDef>Load Type</mat-header-cell>
                    <mat-cell class="loadType" *matCellDef="let row"> 
                        <select class="load-type-incremental" [value]="row.loadType" (change) = "changeLoadType(row.fileType, $event.target.value)">
                            <option [value]="true">Incremental</option>
                            <option [value]="false">Full</option>  
                        </select>
                    </mat-cell>
                </ng-container>

这是数据源

<mat-table [dataSource]="fileTypeIncremental.dataSource">

通过 changeLoadType 方法处理下拉列表中的值更改事件。并且根据某些条件在其中可能会更改数据源。

changeLoadType(type: string, loadType: string): void{
    if(loadType === "false"){
      //check popup
      let dialogRef = this.confirmationDialog.open(ConfirmationDialog, {disableClose: true});
      let instance = dialogRef.componentInstance;
      instance.confirmMessage = "Are you sure you want to do a Full data refresh? All existing data of the selected type will be truncated";

      dialogRef.afterClosed().subscribe(result => {
        if(result) {
          this.fileTypeIncremental.changeLoadType(type, (JSON.parse(loadType)));
        }
        dialogRef = null;
      });
    }
    else{
      this.fileTypeIncremental.changeLoadType(type, (JSON.parse(loadType)));
    }
  }

我需要的是下拉列表,以显示数据源的实际状态([value] =“ row.loadType”),无论在下拉列表中选择了什么。仅在触发事件时才需要Dropdown中的这两个选项。

enter image description here

0 个答案:

没有答案