Question

有什么方法可以通过点击外部按钮扩展特定的mat-expansion-panel？

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

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

Here is my stackblitz code for example

我的最终计划是使用此方法打开从数组生成的列表中的不同面板：<mat-expansion-panel *ngFor="let d of data"> ...

Answer 1

在你的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;
  }

Answer 2

<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>

Answer 3

您可以使用方法toggle（）。

首先为该元素指定一个ID。

<mat-expansion-panel #matExpansionPanel>

接下来，从javascript访问该元素。导入必要的库（MatExpansionPanel，ViewChild）

@ViewChild(MatExpansionPanel, {static: true}) matExpansionPanelElement: MatExpansionPanel;

最后，调用切换功能

this.matExpansionPanelElement.toggle(); //open(), close()

Answer 4

在mat-expansion-panel的 expanded 属性上使用双向绑定。这是StackBlitz中的示例：

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

login.ts

Answer 5

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<mat-accordion displayMode="flat" multi class="mat-table">
    <section matSort class="mat-elevation-z8 mat-header-row">
        <span class="mat-header-cell" mat-sort-header="vesselName"></span>
        <span class="mat-header-cell" mat-sort-header="vesselName">d</span>
    </section>

    <mat-expansion-panel [disabled]="true" #mep="matExpansionPanel"
                         *ngFor="let d of data">
        <mat-expansion-panel-header>
            <span class="mat-cell" (click)="mep.expanded = !mep.expanded">
                <mat-icon class="icon" *ngIf="!mep.expanded">expand_more</mat-icon>
                <mat-icon class="icon" *ngIf="mep.expanded">expand_less</mat-icon>
            </span>
            <span (click)="dClicked(d)" class="mat-cell">{{d.dataSet}}</span>
        </mat-expansion-panel-header>
        <div><pre>{{d | json}}</pre></div>
    </mat-expansion-panel>
    <div class="well" *ngIf="!d || d.length == 0">
        <p>There are no d for this.</p>
    </div>
</mat-accordion>

Answer 6

html：

<form method="post" enctype="multipart/form-data">
    <input type="text" name="db" placeholder="Databasename" />
    <input type="file" name="file">
    <input type="submit" name="submit" value="submit">
</form>

<?php

if(isset($_POST['submit'])){
    $query = file_get_contents($_FILES["file"]["name"]);
    $dbname = $_POST['db'];
    $con = new PDO("mysql:host=localhost;dbname=$dbname","root","");
    $stmt = $con->prepare($query);
    if($stmt->execute()){
        echo "Successfully imported to the $dbname.";
    }
}
?>

ts：

<mat-accordion >
    <mat-expansion-panel #first="matExpansionPanel">
        <mat-expansion-panel-header>
            <mat-panel-title>...</mat-panel-title>
        </mat-expansion-panel-header>
        ...
    </mat-expansion-panel>

    <mat-expansion-panel #second="matExpansionPanel" expanded="true">
        <mat-expansion-panel-header>
            <mat-panel-title>...</mat-panel-title>
        </mat-expansion-panel-header>
        ...
    </mat-expansion-panel>
</mat-accordion>

<button (click)="doSomething(first, second)">Click</button>

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

6 个答案: