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

【问题标题】：Angular 6 ngFor referencing loop variable in same parent elementAngular 6 ngFor在同一父元素中引用循环变量
【发布时间】：2019-03-15 08:03:08
【问题描述】：

我有一个 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)。

【问题讨论】：

标签： angular

【解决方案1】：

顺序很重要，在*ngFor 之后设置expanded 和formGroup 属性。目前，您正尝试在初始化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">

【讨论】：

我会接受这个答案，因为它是正确的，即使我最终使用了不同的解决方案。谢谢

【解决方案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">

【讨论】：