Angular Material md-cell 中的 2 个内联按钮如何

Question

有人可以举例说明 Angular Material 2 DataTable 在单元格内带有内嵌按钮吗？？我无法让它工作...按钮总是一个接一个地出现。

我的代码如下但不起作用：

    <div class="example-container mat-elevation-z8">

  <!--Filtering input fiels-->
  <div class="example-header">
    <md-input-container floatPlaceholder="never">
      <input mdInput #filter placeholder="Αναζήτηση">
    </md-input-container>
  </div>


  <md-table #table [dataSource]="incidentsDataSource" mdSort>

    <ng-container cdkColumnDef="protocolNo">
      <md-header-cell *cdkHeaderCellDef md-sort-header> Αρ. Πρωτοκόλλου</md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.protocolNo}}</md-cell>
    </ng-container>

    <ng-container cdkColumnDef="date">
      <md-header-cell *cdkHeaderCellDef md-sort-header> Ημερομηνία</md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.date | date:'dd/MM/yyyy' }}</md-cell>
    </ng-container>

    <ng-container cdkColumnDef="patient">
      <md-header-cell *cdkHeaderCellDef md-sort-header> Ασθενής</md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.patient.lastName}} {{row.patient.firstName}}</md-cell>
    </ng-container>

    <ng-container cdkColumnDef="doctor">
      <md-header-cell *cdkHeaderCellDef md-sort-header> Ιατρός</md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.doctor.lastName}} {{row.doctor.firstName}}</md-cell>
    </ng-container>

    <ng-container cdkColumnDef="signingDoctor">
      <md-header-cell *cdkHeaderCellDef md-sort-header> Υπογράφων Ιατρός</md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.signingDoctor.lastName}} {{row.signingDoctor.firstName}}</md-cell>
    </ng-container>

    <ng-container cdkColumnDef="clinic">
      <md-header-cell *cdkHeaderCellDef md-sort-header> Κλινική</md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.clinic?.name}}</md-cell>
    </ng-container>

    <ng-container cdkColumnDef="isPayed">
      <md-header-cell *cdkHeaderCellDef md-sort-header> Πληρωμή</md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.isPayed | payment}}</md-cell>
    </ng-container>

    <ng-container cdkColumnDef="actions">
      <md-header-cell *cdkHeaderCellDef> Ενέργειες</md-header-cell>

这是单元格数据

尝试在此处显示单元格中的内联按钮但不起作用

        <div style="display: inline-block;">

          <button md-button (click)="showAndPrint(row)" >
            <md-icon class="md-18">visibility</md-icon> εκτ
          </button>

          <button md-button (click)="editItem(row)"  style="display: inline-block;">
            <md-icon class="md-18">mode_edit</md-icon> επεξ
          </button>

          <button md-button (click)="deleteItem(row)"  style="display: inline-block;">
            <md-icon class="md-18">delete</md-icon> διαγ
          </button>

        </div>

      </md-cell>
    </ng-container>

    <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
    <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
  </md-table>


  <md-paginator #paginator
                [length]="incidentsDataSource.size"
                [pageIndex]="0"
                [pageSize]="10"
                [pageSizeOptions]="[10, 25, 50, 100]">
  </md-paginator>

</div>

提前致谢

Answer 1

设置操作列的宽度应该可以解决您的问题。

将以下内容添加到您的组件 .scss 文件中：

.mat-column-actions {
    flex: 0 0 300px;
}

将 300px 值更改为适合您需要的值！

Answer 2

以下代码可以工作并在单元格内显示内联按钮：

<ng-container matColumnDef="actions">
      <mat-header-cell *matHeaderCellDef> Ενέργειες</mat-header-cell>
      <mat-cell *matCellDef="let row" style="white-space: nowrap">

        <button mat-icon-button (click)="openDialog(row)">
          <span matTooltip="Λεπτομέρειες!">
          <mat-icon style="color: grey">assignment</mat-icon>
          </span>
        </button>

        <a [routerLink]="['update/', row.id]">
          <span matTooltip="Επεξεργασία!">
          <mat-icon>mode_edit</mat-icon>
          </span>
        </a>

        <a [routerLink]="['delete/', row.id]">
          <span matTooltip="Διαγραφή!">
          <mat-icon>delete</mat-icon>
          </span>
        </a>

      </mat-cell>
    </ng-container>

使用以下 css：

.example-container {
  display: flex;
  flex-direction: column;
  max-height: 750px;
  min-width: 300px;
}

.example-header {
  min-height: 64px;
  display: flex;
  align-items: center;
  padding-left: 24px;
  font-size: 20px;
}

.mat-table {
  overflow: auto;
}

.mat-header-cell .mat-sort-header-sorted {
  color: black;
}

.mat-input-container {
  font-size: 14px;
  flex-grow: 1;
  margin-left: 32px;
}

.mat-table {
  overflow: auto;
}

a {
  color: grey !important;
}


/* For Sticky Header */
.mat-header-row {
  top: 0;
  position: sticky;
  position: -webkit-sticky;
  z-index: 1;
  background-color: inherit;
}


.mat-form-field {
  font-size: 14px;
  width: 100%;
}

Angular Material md-cell 中的 2 个内联按钮如何

Angular Material 2 Inline buttons inside md-cell how to

datatable

angular-material2