Question

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

在这一点上，一切都很有效，当我点击问题组件时，问题就出现了，如果我打开另一个问题，它就会开启并处于该状态。根据要求，一次只能打开一个。

我看到一个问题是手风琴是驻留在问题组件中，从问题列表中，我们用* ng对它进行循环，所以每个手风琴都有一个扩展板。

我的代码一直工作，直到我从一个问题列表（父级）和问题（智利）中断了我的代码到双组件

示例代码： - 问题-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>

Answer 1

问题由单个扩展面板表示。手风琴代表一系列问题。所以你的问题组件应该只是一个扩展面板，而不是手风琴。然后你用手风琴里面的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>

Answer 2

@G。 Tranter感谢，对于你的答案，实际上这个（你的建议）我已经尝试过并且没有取得任何成功，之后我尝试了传统的崩溃方式并将自我声明的属性扩展到每个问题对象＆＃34;扩展＆＃34;默认情况下，这对每个问题都是假的，我们在扩展控制中使用它作为ngModel，改变我们处理其他问题的状态＆＃34;扩展＆＃34;属性。

此处的示例现在正在使用，

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

mat-accordion with-in component - angular 5

2 个答案: