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上。（对不起-布局有点混乱。）

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

角材料扩展面板：多重扩展

1 个答案: