Question

如何在每个角度材质表中添加mat-select 列？

这是我的代码：

table.component.html

<section class="intella-container">
  <mat-toolbar class="intella-inst-header">
    <p>Medical Instrument List</p>
    <button class="button-box"><i class="material-icons">add_box</i></button>
  </mat-toolbar>
    <mat-table [dataSource]="dataSource" class="data-table">
      <ng-container matColumnDef="instrumentName">
        <mat-header-cell *matHeaderCellDef class="intella-header-cell">Instrument Name</mat-header-cell>
        <mat-cell *matCellDef="let element" class="intella-cell">{{ element.instrumentName }}</mat-cell>
      </ng-container>

      <ng-container matColumnDef="manufacturer">
        <mat-header-cell *matHeaderCellDef class="intella-header-cell">Manufacturer/Model</mat-header-cell>
        <mat-cell *matCellDef="let element" class="intella-cell">{{ element.manufacturer }}</mat-cell>
      </ng-container>

      <ng-container matColumnDef="serialNumber">
        <mat-header-cell *matHeaderCellDef class="intella-header-cell">Serial Number</mat-header-cell>
        <mat-cell *matCellDef="let element" class="intella-cell">{{ element.serialNumber }}</mat-cell>
      </ng-container>

      <ng-container matColumnDef="location">
        <mat-header-cell *matHeaderCellDef class="intella-header-cell">Location/Area</mat-header-cell>
        <mat-cell *matCellDef="let element" class="intella-cell">{{ element.location }}</mat-cell>
      </ng-container>

      <ng-container matColumnDef="">
        <mat-header-cell *matHeaderCellDef class="intella-header-cell">Options</mat-header-cell>
        <mat-cell *matCellDef="let element" class="intella-cell"><mat-select placeholder="Set remarks" [value]>
          <mat-option value="report">Report</mat-option>
          <mat-option value="edit">Edit</mat-option>
          <mat-option value="delete">Delete</mat-option>
        </mat-select></mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns" class="intella-table-header"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
  </section>

table.component.ts

export class InstrumentRegistrationListComponent implements OnInit {
  displayedColumns = [
    'instrumentName',
    'manufacturer',
    'serialNumber',
    'location'
  ];
  dataSource = new MatTableDataSource<Instruments>();

  constructor(private equipmentService: EquipmentService) { }

  ngOnInit() {
    this.fetchInstruments();
  }

  fetchInstruments() {
    this.equipmentService.getInstrumentList()
      .subscribe(
        (instruments: Instruments[]) => {
          this.dataSource.data = instruments;
        }
      );
  }
}

Answer 1

如何在每列中添加mat-select内部角度材质表？

  <mat-header-cell *matHeaderCellDef> 
              <mat-form-field>
                  <mat-select panelClass="example-panel-dark-blue">
                    <mat-option *ngFor="let cust of [1,2,3,4]"
                                [value]="cust"> {{cust}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
   </mat-header-cell>

CODE EXAMPLE

在Angular 5上的材质表中添加选择材料选择

1 个答案: