首页 文章

如何通过按钮点击切换垫扩展面板？

提问于
浏览 次
2

有没有什么方法可以通过单击外部按钮来扩展特定的垫扩展面板？

我试过链接到面板的ID，但没有成功......

<mat-expansion-panel id="panel1"> ... </>
...
<button (click)="document.getElementById('panel1').toggle()>Click me</button>

Here is my stackblitz code for example

*My eventual plan is to use this method to open different panels within a list generated from an array: <mat-expansion-panel ngFor="let d of data"> ...

html angular angular-material

3 回答

  • 0

    在你的html文件中：

    <mat-expansion-panel [expanded]="panelOpenState">

    <mat-expansion-panel-header>
        <mat-panel-title>
            TITLE
        </mat-panel-title>
    </mat-expansion-panel-header>

    <p>BODY</p>
</mat-expansion-panel>

<button mat-raised-button (click)="togglePanel">TOGGLE</button>

    在您的TS文件中：

    panelOpenState: boolean = false;

togglePanel() {
    panelOpenState = !panelOpenState
}

    如果使用* ngFor生成扩展面板：

    <mat-expansion-panel [expanded]="isOpen" *ngFor="let d of data">
    <mat-expansion-panel-header>
        {{ d.header }}
    </mat-expansion-panel-header>
    <p>{{ d.content }}</p>
</mat-expansion-panel>

<button mat-raised-button (click)="togglePanel">TOGGLE</button>

    如果按下按钮，则所有展开的面板同时打开 .

    要使用一个按钮只打开一个面板，请为每个元素添加一个“expanded”属性，如下所示：

    data = [
    {id:1, header:'HEADER 1', content:'CONTENT 1', expanded: false},
    {id:2, header:'HEADER 2', content:'CONTENT 2', expanded: false},
    {id:3, header:'HEADER 3', content:'CONTENT 3', expanded: false},
    {id:4, header:'HEADER 4', content:'CONTENT 4', expanded: false},
  ]

    然后在你的模板中：

    <mat-expansion-panel [(ngModel)]="d.expanded" 
    [expanded]="d.expanded" *ngFor="let d of data" ngDefaultControl>

    <mat-expansion-panel-header>
        <button (click)="toggle(d.expanded)">TOGGLE</button>
        {{ d.header }}
    </mat-expansion-panel-header>
    <p>{{ d.content }}</p>

</mat-expansion-panel>

    按下按钮点击的方法：

    toggle(expanded) {
    expanded = !expanded;
  }
    回复于
  • 7
    <mat-expansion-panel [disabled]="true"
                     #mep="matExpansionPanel"
                     *ngFor="let foo of list">
  <mat-expansion-panel-header>
      <button (click)="mep.expanded = !mep.expanded">Toggle</button>
  </mat-expansion-panel-header>

  <p>Text</p>

</mat-expansion-panel>
    回复于
  • 2

    在mat-expansion-panel的扩展属性上使用双向绑定 . 以下是StackBlitz的一个示例：

    https://stackblitz.com/edit/angular-gtsqg8

    <button (click)='xpandStatus=xpandStatus?false:true'>Toggle it</button>
<p>
<mat-expansion-panel [(expanded)]="xpandStatus">
  <mat-expansion-panel-header>
    <mat-panel-title>This an expansion panel</mat-panel-title>
    <mat-panel-description>xpandStatus is {{xpandStatus}}</mat-panel-description>
  </mat-expansion-panel-header>
  Two-way binding on the expanded attribute gives us a way to store and manipulate the expansion status.
</mat-expansion-panel>
</p>
    回复于

相关问题