mat-accordion 内置组件 - 角度 5答案

【问题标题】：mat-accordion with-in component - angular 5mat-accordion 内置组件 - 角度 5
【发布时间】：2018-10-02 21:08:44
【问题描述】：

我有一个带有 mat-accordion 的问题组件来显示问题。我将我的问题组件称为问题列表组件。

到目前为止，一切都很好，当我单击问题组件时，问题就出现了，它正在打开并且如果我还要打开另一个问题组件，它也会保持这种状态。根据要求，一次只能打开一个。

我看到一个问题是手风琴存在于问题组件中，并且从问题列表中，我们使用 *ngFor 循环它，因此每个手风琴都有一个扩展面板。

我的代码一直在工作，直到我将我的代码从一个问题列表（父级）和问题（智利）分解为两个组件

示例代码：- question-list.component:

<ng-template ngFor let-data [ngForOf]="questionList" let-i="index" >
    <app-question [data]="data"></app-question>
</ng-template>

question.component:-

<mat-accodion>
    <mat-expansion-panel>
    <mat-expansion-panel-header>
        <mat-panel-description style="float:left;">
        {{data.description}}
        </mat-panel-description>
    </mat-expansion-panel-header>
    <form>
        <div class="row text-left options">
        <div class="col-md-6" *ngFor="let option of data.options;">
            <mat-checkbox>{{option.description}}</mat-checkbox>
        </div>
        </div>
   </form>
</mat-expansion-panel>
</mat-accodion>

【问题讨论】：

标签： angular5 angular-components angular-material-5

【解决方案1】：

@G。 Tranter 感谢您的回答，实际上这个（您的建议）我已经尝试过但没有取得任何成功，之后我尝试了使用自我声明的属性进行折叠和展开的传统方法，默认为每个“展开”的问题对象这对每个问题都是错误的，我们在扩展控制中将其用作 ngModel，在更改我们处理其他“扩展”属性的状态时。

这里的示例现在正在工作，

<mat-expansion-panel [(ngModel)]="data.expanded"
name="fieldName" ngDefaultControl (opened)="panelOpenState(data._id)"
[expanded]="data.expanded">
    <mat-expansion-panel-header>
        <mat-panel-description style="float:left;">
            {{data.description}}
         </mat-panel-description>
    </mat-expansion-panel-header>
<form>
    <div class="row text-left options">
    <div class="col-md-6" *ngFor="let option of data.options;">
     <mat-checkbox>
            {{option.description}}
            </mat-checkbox>

    </div>
    </div>
 </form>

【讨论】：

【解决方案2】：

一个问题由一个扩展面板表示。问题列表由手风琴表示。所以你的问题组件应该只是一个扩展面板，而不是手风琴。然后使用手风琴内的 for 循环将手风琴作为问题列表的一部分。

问题列表：

<mat-accordion>
    <ng-container *ngFor="let data of questionList; let i = index">
        <app-question [data]="data"></app-question>
    </ng-container>
</mat-accordion>

问题：

<mat-expansion-panel>
    <mat-expansion-panel-header>
        <mat-panel-description style="float:left;">
            {{data.description}}
        </mat-panel-description>
    </mat-expansion-panel-header>
    <form>
        <div class="row text-left options">
            <div class="col-md-6" *ngFor="let option of data.options;">
                <mat-checkbox>{{option.description}}</mat-checkbox>
            </div>
        </div>
   </form>
</mat-expansion-panel>

【讨论】：