Question

我在同一页面上有2种不同的手风琴。每个手风琴都有多个扩展面板。如何关闭2个手风琴中的所有扩展面板并打开当前选择的扩展面板？我可以关闭当前的手风琴扩展面板，但其他面板仍保持打开状态。并且两个手风琴的功能相同，只是它从不同的列表中获取数据，并且在两个手风琴之间插入了一个div

`<mat-accordion [multi]= "true"  >
    <mat-expansion-panel *ngFor = "let item of items" (click) = "viewItem(item)" >
        <mat-expansion-panel-header>
           <mat-panel-title>
              //something
           </mat-panel-title>
        </mat-expansion-panel-header>
            //something..
    </mat-expansion-panel>
</mat-accordion> 
<mat-accordion [multi]= "true"  >
    <mat-expansion-panel *ngFor = "let item of items" (click) = "viewItem(item)" >
      <mat-expansion-panel-header>
         <mat-panel-title>
              //something
         </mat-panel-title>
      </mat-expansion-panel-header>
            //something..
    </mat-expansion-panel>
</mat-accordion>`

Answer 1

您可以在打开其中一个面板时关闭所有其他面板：

TS

import { Injectable } from '@angular/core';
import { AuthService } from "./auth.service";
import { Router } from '@angular/router';
import { BehaviorSubject } from "rxjs/internal/BehaviorSubject";
import { HttpClient } from "@angular/common/http";

export interface universidad {
  name: String;
  sede: [String]
}

@Injectable({
  providedIn: 'root'
})
export class HelperService {
  private toggleTrigger = new BehaviorSubject<boolean>(false);
  toggle = this.toggleTrigger.asObservable();

  constructor(
    private authService: AuthService,
    private router: Router,
    private http: HttpClient

  ) { }

  listadoUrl: string = 'http://localhost:3000/universidads/listado';
  getListado() {
    // now returns an observable of universidad
    return this.http.get<universidad>(this.listadoUrl);
  }
}

HTML

<div class="row">
  <div class="col-6">
    <form>
      <div class="form-group">
        <label for="universidad">University list</label>
        <select
          name="universidad"
          class="form-control"
          id="univer"
          (click)="doIt()"
          >
          <option
            *ngFor="let univ of universidad | async"
            >
            {{ univ }}
          </option>
        </select>
      </div>
    </form>
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
      <h1 class="display-1 mt-4">{{univer}}</h1>
  </div>
</div>

展开角形材质的手风琴

1 个答案: