angular - hur stänger man en mat-accordion när en annan mat-accordion öppnas?

Jag använder Angular Material med Angular v6. Jag har två dragspel där varje dragspel innehåller en expansionspanel. Hur kan jag stänga det öppna dragspel när jag öppnar det andra dragspel? Båda dragen förblir öppna nu!

Kod :

<!-- first accordion -->
<mat-accordion>
    <mat-expansion-panel mat-list-item *ngIf="menuitem.type === 'sub'">
      <mat-expansion-panel-header class="main-header">
        <mat-panel-title>
          <mat-icon class="list-icon">{{ menuitem.icon }}</mat-icon>
          <span class="name">{{ menuitem.name }}</span>
        </mat-panel-title>
      </mat-expansion-panel-header>

      <mat-nav-list *ngFor="let child of menuitem.children" routerLinkActive="open">
        <a class="grand-menu" mat-list-item href="javascript:;" *ngIf="child.type === 'x'" [routerLink]="['/', menuitem.state, child.state ]">
          <span class="grand">{{ child.name }}</span>
        </a>
      </mat-nav-list>

      <mat-accordion open>
        <mat-expansion-panel mat-list-item *ngFor="let childitem of menuitem.children" routerLinkActive="open" #example>
          <mat-expansion-panel-header class="child" *ngIf="childitem.grand_children">
            <mat-panel-title class="child-title">
              <mat-icon class="arrow-icon" *ngIf="!example.expanded">keyboard_arrow_right</mat-icon>
              <mat-icon *ngIf="example.expanded">keyboard_arrow_down</mat-icon>
              {{ childitem.name }}
            </mat-panel-title>
          </mat-expansion-panel-header>

          <mat-nav-list *ngFor="let child of childitem.grand_children" routerLinkActive="open">
            <a class="grand-menu" mat-list-item href="javascript:;" *ngIf="childitem.type === 'parent'" [routerLink]="['/', menuitem.state, childitem.state, child.state ]">
              <span class="grand">{{ child.name }}</span>
            </a>
          </mat-nav-list>
        </mat-expansion-panel>
      </mat-accordion>
    </mat-expansion-panel>
  </mat-accordion>

   <!-- second accordion -->
  <mat-accordion>
      <mat-expansion-panel mat-list-item *ngIf="menuitem.type === 'sub1'">
        <mat-expansion-panel-header class="main-header">
          <mat-panel-title>
            <mat-icon class="list-icon">{{ menuitem.icon }}</mat-icon>
            <span class="name">{{ menuitem.name }}</span>
          </mat-panel-title>
        </mat-expansion-panel-header>

        <mat-nav-list *ngFor="let child of menuitem.children" routerLinkActive="open">
          <a class="grand-menu" mat-list-item href="javascript:;" *ngIf="child.type === 'x'" [routerLink]="['/', menuitem.state, child.state ]">
            <span class="grand">{{ child.name }}</span>
          </a>
        </mat-nav-list>
      </mat-expansion-panel>
    </mat-accordion>

Svar #1

Du kan använda index medan du loopar och heltal medan du inte loopar mat-expansion-panelen.

<mat-accordion [togglePosition]="'before'" multi>
<mat-expansion-panel [expanded]="state === 0" (opened)="setState(0)">
    <mat-expansion-panel-header>
        <mat-panel-title>
            <p class="mt-4">Title 1</p>
        </mat-panel-title>
    </mat-expansion-panel-header>
    <app-upload></app-upload>
</mat-expansion-panel>
<br>
<mat-expansion-panel [expanded]="state === 1" (opened)="setState(1)">
    <mat-expansion-panel-header>
        <mat-panel-title>
            <p class="mt-4">Title 2</p>
        </mat-panel-title>
    </mat-expansion-panel-header>
    <app-upload></app-upload>
</mat-expansion-panel>

I ts-fil:

step: number = -1; // -1 makes all the accordians to be closed. Can replace 0 with -1 to open the required accordion open on page load.

setState(stateNumb: number) {
  this.state = stateNumb;
}

Svar #2

Använd de öppnade och stängda händelser som tillhandahålls av mat-expansion-panel.

<mat-expansion-panel (closed)="isOpen = false" (opened)="isOpen = true">
  [...]
</mat-expansion-panel>

I din klass, skapa en publik variabel, t.ex. isOpen:

export class YourClass {
  isOpen: boolean;
}

Skicka sedan isOpen som en @Input() till den andra mat-expansion-panelen

<mat-expansion-panel [expanded]="isOpen">
</mat-expansion-panel>

Du måste implementera detta i båda riktningarna för att få varje dragspel att lyssna på det andra.

Relaterade artiklar