每行带有可扩展操作按钮的角材料表

Question

我们正在尝试实现如下图所示的表格设计 POC，它具有以下特性。

问题在于以下功能

1) Expand and collapse behavior should be per row(Not for all rows at a time).
2) It should have value of particular row on click of any action from action-toolbar(i.e. Config, History, etc in image).

HTML

<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </th>
<td mat-cell *matCellDef="let element">
  <div [ngClass]="showFloatingButtons == true ? 'floating-pane-active' : 'floating-pane-deactive'"
    class="button-row">
    <mat-icon mat-fab *ngIf="showFloatingButtons == true" color="primary" class="floating-buttons">offline_pin
    </mat-icon>
    <mat-icon mat-fab *ngIf="showFloatingButtons == true" color="primary" class="floating-buttons">query_builder
    </mat-icon>
    <mat-icon mat-fab *ngIf="showFloatingButtons == true" color="primary" class="floating-buttons" disabled>restore
    </mat-icon>
    <mat-icon mat-fab *ngIf="showFloatingButtons == true" color="primary" class="floating-buttons">
      play_circle_filled</mat-icon>
    <mat-icon (click)="toggleFloat()" class="sky_blue">more_horiz</mat-icon>
  </div>
</td>

CSS

table {
  width: 100%;
}

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

.mat-column-position {
  max-width: 100px;
  min-width: 10px;
}

.mat-column-name {
  max-width: 100px;
  min-width: 10px;
}

.example-trigger {
  display: inline-block;
}

.floating-buttons {
  z-index: 2;
  // position: fixed;
  overflow: auto;
  top: auto;
  left: auto;
}

.floating-pane-active {
  background-color: rgba(215, 228, 230, 0.39);
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  background-position: right;
  background-repeat: repeat;
}

.floating-pane-deactive {
  background-color: rgba(215, 228, 230, 0.39);
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  background-position: right;
  background-repeat: repeat;
  width: 30px;
}

.button-row {
  align-items: center;
  justify-content: space-around;
}

.action-buttons {
  width: 20px;
}

.sky_blue {
  color: skyblue;
}

.mat-column-symbol {
  word-wrap: break-word !important;
  white-space: unset !important;
  flex: 0 0 10% !important;
  width: 10% !important;
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  text-align: right;
}

TS（只放重要的行）

showFloatingButtons = false;

折叠的列图标

扩展的列图标

仅供参考：我已将 link 用于可扩展行表。

请查找演示代码here on stackblitz 了解更多信息。

PS：这里的主要问题是实现一次扩展单行图标。

Answer 1

您的第一个问题很简单，您使用相同的变量来显示/隐藏元素，因此它们一起出现/消失是一种自然行为。您必须创建一个表来存储每行的状态（扩展与否），为此我创建了此表并在 ngOnInit 中对其进行了初始化：

expanded = [];
for(var i: number = 0; i < ELEMENT_DATA.length; i++) {
    this.expanded[i] = false;
}

然后我更改了您的 toggleFunction 以更改该表列的值：

toggleFloat(i:number) {
    this.expanded[i] = !this.expanded[i];
}

在 HTML 中，我更改了 *ngIf 条件以使用新表而不是旧变量：

  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </th>
    <td mat-cell *matCellDef="let element; let i = index">
      <div [ngClass]="expanded[i] == true ? 'floating-pane-active' : 'floating-pane-deactive'"
        class="button-row">
        <mat-icon mat-fab *ngIf="expanded[i] == true" color="primary" class="floating-buttons">offline_pin
        </mat-icon>
        <mat-icon mat-fab *ngIf="expanded[i] == true" color="primary" class="floating-buttons">query_builder
        </mat-icon>
        <mat-icon mat-fab *ngIf="expanded[i] == true" color="primary" class="floating-buttons" disabled>restore
        </mat-icon>
        <mat-icon mat-fab *ngIf="expanded[i] == true" color="primary" class="floating-buttons">
          play_circle_filled</mat-icon>
        <mat-icon (click)="toggleFloat(i)" class="sky_blue">more_horiz</mat-icon>
      </div>
    </td>
  </ng-container>

Here is the stackblitz，解决了你的第一个问题，不过我不太明白你的第二个问题是什么。

Answer 2

对于列表中的第 4 项，解决此问题的一种方法是向每个元素本身添加一个布尔属性（在我的示例中我称之为 expand），以指定它是否被扩展，就像这样...

{ id: 1, startDate: today, endDate: today, position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H', expand: false }

然后，您可以通过element 变量（*matCellDef="let element"）访问模板中的这个新属性。

但首先确保在调用 click 函数时传递元素，如下所示... <mat-icon (click)="toggleFloat(element)" class="sky_blue">more_horiz</mat-icon>

并且改变toggleFloat函数来改变这个元素的元素扩展属性而不是showFloatingButtons，像这样……

  toggleFloat(element) {
    element.exapand = !element.exapand;
    console.log('show:' + element.exapand);
  }

完成后，您可以修复模板以开始使用元素扩展属性而不是组件的扩展属性，方法是在符号列的所有 *ngIf 中将 showFloatingButtons 替换为 element.exapand，如下所示...

  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </th>
    <td mat-cell *matCellDef="let element">
      <div [ngClass]="element.exapand ? 'floating-pane-active' : 'floating-pane-deactive'"
        class="button-row">
        <mat-icon mat-fab *ngIf="element.exapand" color="primary" class="floating-buttons">offline_pin
        </mat-icon>
        <mat-icon mat-fab *ngIf="element.exapand" color="primary" class="floating-buttons">query_builder
        </mat-icon>
        <mat-icon mat-fab *ngIf="element.exapand" color="primary" class="floating-buttons" disabled>restore
        </mat-icon>
        <mat-icon mat-fab *ngIf="element.exapand" color="primary" class="floating-buttons">
          play_circle_filled</mat-icon>
        <mat-icon (click)="toggleFloat(element)" class="sky_blue">more_horiz</mat-icon>
      </div>
    </td>
  </ng-container>

我不清楚您对第 5 项中的问题想要什么，但如果您要显示特定于该元素的内容，请遵循扩展功能的相同原则。

附带说明，由于您正在处理布尔值，因此无需像 *ngIf="showFloatingButtons == true" 这样测试相等性，我们可以简单地执行此操作 *ngIf="showFloatingButtons"。

在这里查看完整的解决方案https://stackblitz.com/edit/angular-1tgnev?file=src/app/app.component.html。