在Angular模板中创建局部变量

Question

I'm using Angular 6.

I would like to assign a local variable in for loop to avoid multiple call of the method.

<li *ngFor="let item of items">
    <!-- Declare someItem variable here -->
    <!-- let someItem = getSomeItemFromDifferentDataStructureUsingSomeLogic(item) -->
    {{ someItem.name }}
    {{ someItem.anotherValue }}
</li>

I don't also want to make a separate component to display someItem cause it is too trivial to create separate one.

What would be your's approach?

Many thanks for a help.

Answer 1

I would map items to someItem s in compontent code and interate over it

In compontent:

someItems=items.map(this.getSomeItemFromDifferentDataStructureUsingSomeLogic.bind(this)) ;

and in template

<li *ngFor="let someItem of someItems">
    {{ someItem.name }}
    {{ someItem.anotherValue }}
</li>

In case if you need in this *for loop original item, just create an array of item-someItem pairs and iterate over that, using what is needed respectively.