如何根据 ngFor 循环中项目的属性更改 Angular 中组件上已绑定的 "label"？

Question

我找到了很多关于绑定、ngIf、ngFor 和所有这些东西的文章，但没有一个对我的特定问题有用。也感觉我只是错过了一些语法规则。

以下问题：如果重复 ngFor 循环中的一个步骤，它应该在其翻译名称中添加一个 (1)。现在它显示整个 'step.header | translate ' 作为标签而不是后面的内容。

<div *ngFor="let step of dataService.current.steps" >
            <component 
            ...
            [label]="!step.repeated ? 'step.header | translate' : 'step.header | translate' + ' (1)'"
            ...
           </component>
</div>

我希望问题从这里就很清楚了。

非常感谢您！

Answer 1

如果您想将管道用作复杂表达式的一部分，您应该将其括在括号中。您还可以稍微简化表达式，因为主要部分是相同的：

<div *ngFor="let step of dataService.current.steps">
    <component 
        [label]="(step.header | translate) + (step.repeated ? ' (1)' : '')">
    </component>
</div>

如何根据 ngFor 循环中项目的属性更改 Angular 中组件上已绑定的 "label"？

How to change an already bound "label" on a component in Angular, in dependence of attributes of the item from the ngFor loop?

angular

if-statement

binding

ngfor

angular-ng-if