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的元素expand属性，像这样...

  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处查看完整的解决方案。

角物料表，每行都有可扩展的动作按钮

2 个答案: