angular - 在 ngFor 中声明变量

Question

在我的 angular2 项目中，我需要呈现一个矩阵。 这是我当前的代码:

<tr *ngFor="let worker of workers">
    <td class="{{worker.fired ? 'fired-worker':''}}">{{worker.lastName}}<br>{{worker.firstName}}</td>
    <td *ngFor="let course of courses;" class="sk-table-sub-header">

        <div *ngIf="course.isGeneric">
            <div class="col-xs-6" sc-dc [sc-dc-date]="matrix[worker.id][course.id].expiration">
                <date-picker (onDateChanged)="onDateChanged($event, worker, course, 'genericStartDate')" [date]="matrix[worker.id][course.id].genericStartDate></date-picker>
            </div>
            <div class="col-xs-6 training-table-rounded-cell" sc-dc [sc-dc-date]="matrix[worker.id][course.id].expiration">
                <date-picker (onDateChanged)="onDateChanged($event, worker, course, 'expiration')" [date]="matrix[worker.id][course.id].expiration" ></date-picker>
            </div>                    
        </div>
        ...

如您所见，我多次使用了 matrix[worker.id][course.id].expiration。 我尽量避免像这样声明一个变量:

 <td *ngFor="let course of courses; let item = matrix[worker.id][course.id]" ...>

但是我得到一个解析错误:

 Parser Error: Unexpected token [, expected identifier, keyword, or string at column 44 in [ngFor let course of courses; let i = matrix[worker.id][course.id]] in TrainingPlanComponent@44:20 ("r.fired ? 'fired-worker':''}}">{{worker.lastName}}<br>{{worker.firstName}}</td>

有没有办法实现我的意图？

非常感谢

Answer 1

您目前无法为模板变量分配任意值。

• 模板变量可以引用添加它们的元素或组件
• exportAs 引用可以分配给模板变量，如 #xxx="ngForm"
• 由 ngFor 的 index 指令创建的局部变量可以赋值

还有一个 Unresolved 问题来支持您的用例，但不清楚是否以及何时会支持。

作为解决方法，您可以考虑将模板的一部分包装到它自己的组件中，并将值传递给 @Input()