Панель расширения угловых материалов: многократное расширение - PullRequest
Новая
       22

Панель расширения угловых материалов: многократное расширение

0 голосов
/ 20 сентября 2018

Я работаю в режиме сравнения с панелями расширения из 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, два других переключились бы также?

Я немного борюсь, проверяя, какУ меня могут быть динамические / похожие идентификаторы, но я застрял в этом вопросе.

Спасибо за помощь

1 Ответ

0 голосов
/ 20 сентября 2018

Это просто вопрос правильной логики.Вы действительно просто привязываете расширенное к сложному выражению, которое возвращает состояние, соответствующее тому, сравнивается ли собака.Вам необходимо добавить логику для этого выражения, а также логику для обработки операций расширения / сворачивания панели расширения, которые также зависят от состояния сравнения собаки.Что-то вроде: 

<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 .(Извините - макет немного запутан.)

Это может быть не совсем то, что вы хотите, но, надеюсь, вы можете использовать его в качестве начала.

...