Angular Material 扩展面板：多重扩展

Question

我正在使用 Angular Material 的扩展面板进行比较视图。

它根据我要比较的狗/零件的数量动态呈现，将包含可以比较的零件的 mat-grid-list 中的列设置为扩展面板。

<h2 class="dogs-comparison--header">dogs Comparison</h2>
<mat-grid-list [cols]="dogs.length" rowHeight="20:1" *ngIf="!isLoading">
  <mat-grid-tile *ngFor="let dog of dogs" colspan="1" rowspan="2" layout="layout-fill">
    <mat-grid-tile-header class="column-header">
      {{dog['title']}}
    </mat-grid-tile-header>
    <mat-accordion multi="true" class="dog-compare--dog_parts">
      <mat-expansion-panel *ngFor="let part of dog['parts']" [expanded]="part.isExpanded">
        <mat-expansion-panel-header>
          <mat-panel-title>
            {{ part.partTitle}}
          </mat-panel-title>
        </mat-expansion-panel-header>
        <p *ngFor="let item of part['items']">
          {{item.itemTitle}}: <span>{{item.itemValue}}</span>
        </p>
      </mat-expansion-panel>
    </mat-accordion>
  </mat-grid-tile>
</mat-grid-list>

我的问题是：有什么方法可以在单击一列中的一个部件作为扩展面板时，打开相邻列的扩展面板。 所以假设 Dog 有一个名为 Anatomy 的部分，我比较 Dog1、Dog2 和 Dog3，如果我切换 Dog1 Anatomy 扩展面板，其他两个也会切换？

我有点挣扎，检查我如何拥有动态/类似的 ID，但我现在被困在这个问题上。

感谢您的帮助

Answer 1

这只是让逻辑正确的问题。 您实际上只是将绑定扩展为一个复杂的表达式，该表达式返回适合是否正在比较狗的状态。 您需要添加该表达式的逻辑以及处理扩展面板展开/折叠操作的逻辑，这也取决于狗的比较状态。 就像是：

<mat-grid-tile-header class="column-header">
    {{dog['title']}}&nbsp;&nbsp;
    <mat-checkbox 
        [checked]="dog.compare" 
        (change)="compare(dog, $event.checked)">compare</mat-checkbox>
</mat-grid-tile-header>
<mat-accordion multi="true" class="dog-compare--dog_parts">
    <mat-expansion-panel *ngFor="let part of dog['parts']; index as i" 
        [expanded]="isExpanded(dog, part, i)" 
        (opened)="togglePart(dog, part, i, true)"
        (closed)="togglePart(dog, part, i, false)">
...

expandedParts = { };

togglePart(dog, part, index, expanded) {
  if (dog.compare) {
    this.expandPart(index, expanded);
  } else {
    part.expanded = expanded;
  }
}

compare(dog, compare) {
  if (compare) {
    let alreadyComparing = false;  
    this.dogs.forEach( (item) => {
      alreadyComparing = alreadyComparing || item.compare;
    });
    if (!alreadyComparing) {
      dog.parts.forEach( (part, index) => {
        this.expandedParts[index.toString()] = part.expanded;
      });
    }
    dog.compare = compare;
  } else {
    dog.compare = compare;
    let stillComparing = false;  
    this.dogs.forEach( (item) => {
      stillComparing = stillComparing || item.compare;
    });
    if (!stillComparing) {
      this.expandedParts = { };
    }
  }
}

isExpanded(dog, part, index) {
  if (dog.compare) {
    return !!this.expandedParts[index.toString()];
  } else {
    return !!part.expanded;
  }
}

expandPart(index, expanded) {
  this.expandedParts[index.toString()] = expanded;
}

这是在Stackblitz 上。 （对不起 - 布局有点乱。）

这可能不是您想要的，但希望您可以将其用作开始。