Angular 角度6材质设计手风琴openall

我尝试在我的angular应用程序中使用两个不同数据的手风琴组，就像下面提到的代码一样，但我不知道如何在我的应用程序中使用两个相同的组件

从“@angular/core”导入{OnInit}； 从“@angular/core”导入{Component，ViewChild，ViewEncapsulation}； 从“@angular/material”导入{MatAccordion}； @组成部分{ 选择器：“应用程序演示手风琴”， templateUrl:'./demo accordio.component.html'， 样式URL:['./demo accordion.component.css'] } 导出类DemoAccordionComponent实现OnInit{ 构造函数{} 恩戈尼特{ } @VIEW儿童手风琴手风琴：手风琴； @VIEW儿童手风琴测试：手风琴； 显示模式：字符串='默认'； displayMode1:string='default'； 多=真； 隐藏切换=错误； 隐藏变位1=假； 禁用=错误； showPanel3=真； 第11组=假； 扩展高度：字符串； 折叠高度：字符串； } 手风琴 手风琴选项

仅限手风琴动作“多重展开”模式

全部展开 全部崩溃 手风琴板

第一节 这是有意义的内容文本

第二节 这是有意义的内容文本

第12节 这是有意义的内容文本

第13节 这是有意义的内容文本

扩展所有新的 崩塌所有新的 尝试扩展属性

[扩展]=真

适用于所有扩展面板

参考-->

尝试扩展属性

[扩展]=真

适用于所有扩展面板

---

参考-->

您可以进行一些小的更改以使其正常工作

更改：

@ViewChild(MatAccordion) accordion: MatAccordion;
@ViewChild(MatAccordion) testing: MatAccordion;

致：

添加一些功能：

openAllFirst() {
    this.firstAccordion.openAll();
}
closeAllFirst() {
    this.firstAccordion.closeAll();
}
openAllSecond() {
    this.secondAccordion.openAll();
}
closeAllSecond() {
    this.secondAccordion.closeAll();
}

(click)="openAllFirst()"

在HTML中，将以下内容添加到两个手风琴中：

<mat-accordion ....  #firstAccordion="matAccordion">
<mat-accordion ....  #secondAccordion="matAccordion">

我已将上面的代码复制到Stackblitz中，并进行了这些更改

---

您可以进行一些小的更改以使其正常工作

更改：

@ViewChild(MatAccordion) accordion: MatAccordion;
@ViewChild(MatAccordion) testing: MatAccordion;

致：

添加一些功能：

openAllFirst() {
    this.firstAccordion.openAll();
}
closeAllFirst() {
    this.firstAccordion.closeAll();
}
openAllSecond() {
    this.secondAccordion.openAll();
}
closeAllSecond() {
    this.secondAccordion.closeAll();
}

(click)="openAllFirst()"

在HTML中，将以下内容添加到两个手风琴中：

<mat-accordion ....  #firstAccordion="matAccordion">
<mat-accordion ....  #secondAccordion="matAccordion">

我已将上面的代码复制到Stackblitz中，并进行了这些更改

---

您好，谢谢您，但我的问题是我需要使用两个，我必须通过单击按钮来控制每个手风琴面板的展开和折叠。与上面HTML中提到的完全相同。通过使用@ViewChild，我尝试访问mat手风琴，但无法访问第二个手风琴。只有第一个手风琴可以控制按钮的点击。我经常遇到这样的错误：无法绑定到“expanded”，因为它不是“mat accordion”的已知属性。您好，谢谢您，但我的问题是我需要使用两个，我必须通过按钮点击来控制每个手风琴面板的展开和折叠。与上面HTML中提到的完全相同。通过使用@ViewChild，我尝试访问mat手风琴，但无法访问第二个手风琴。只有第一个手风琴可以在点击按钮时进行控制。我一直遇到这样的错误：无法绑定到“expanded”，因为它不是“mat accordion”的已知属性。