Question

我有一个Angular Material手风琴，我希望使用* ngFor如下创建-

<mat-expansion-panel class="noShadow border-top"
                     [expanded]="guest.get('expanded').value"
                     [formGroup]="guest"
                     *ngFor="let guest of guestFormArr.controls; let i = index;">

请注意[expanded]属性，根据该属性，我需要根据* ngFor循环中的'guest'变量进行设置。

我似乎无法使它正常工作。这有可能吗？元素可以访问定义的相同级别的“ guest”变量吗？我了解访问“来宾”的嵌套元素。

谢谢

解决方案：

我最终做了以下事情

<mat-expansion-panel class="noShadow border-top"
                 *ngFor="let guest of guestFormArr.controls; let i = index;"
                 [formGroup]="guest" [expanded]="open === i">

然后我只需简单地增加或减少分别具有（click）= next（i）或（click）= back（i）的“ Next”和“ Back”按钮上的“ open”变量。

Answer 1

顺序很重要，请在expanded之后设置formGroup和*ngFor属性。当前，您正在尝试在初始化guest变量之前设置这些属性，以使其为undefined。

<mat-expansion-panel class="noShadow border-top"
                     *ngFor="let guest of guestFormArr.controls; let i = index;"
                     [formGroup]="guest"
                     [expanded]="guest.get('expanded').value">

Answer 2

这里的问题是您在声明之前使用guest。要修复它，只需更改它应该工作的属性顺序即可。

将*ngFor放在使用guest的所有属性之前。

<mat-expansion-panel class="noShadow border-top"
                     *ngFor="let guest of guestFormArr.controls; let i = index;"
                     [expanded]="guest.get('expanded').value"
                     [formGroup]="guest">

Angular 6 ngFor在同一父元素中引用循环变量

2 个答案: