Angular：是否可以在循环模板中创建变量？

Question

I have a *ngFor inside my template where I want to call a function on each item. the function returns an object with three values that I want to display inside my template. The problem right now is that I am calling the function three times to display all properties of the object.

What I want to do is bind the result to a variable so that I can then use the variable instead of calling the function 3 times. So what I want to achieve is something like the following:

var lists = [['a', 'b', 'c'], ['k', 'd', 't']];

function addx(letters){
    return {
    'item1': letters[0] + 'x',
    'item2': letters[1] + 'x',
    'item3': letters[2] + 'x',
  }
}

for(var i=0; i<lists.length; i++){
    var a = addx(lists[i])
  console.log(a.item1);
  console.log(a.item2);
  console.log(a.item3);
}

Answer 1

Maybe I haven't understood exactly what you want, but wouldn't a simple 'map' do? specifically

let newList = lists.map(addx);

The you can use newList for your ngFor

 var lists = [['a', 'b', 'c'], ['k', 'd', 't']]; function addx(letters){ return { 'item1': letters[0] + 'x', 'item2': letters[1] + 'x', 'item3': letters[2] + 'x', } } var newList = lists.map(addx); console.log(newList); 

Answer 2

You can use something called "Pipe" in the ngFor syntax.

The following documentation uses it to filter the ngFor list, but it could be used to map the elements using the function you defined.

Your template would be something like:

<div *ngFor="let obj of (objs | myPipe)">

And your pipe:

import { Pipe, PipeTransform } from '@angular/core';
import { MyType } 

@Pipe({ name: 'myPipe' })
export class MyPipe implements PipeTransform {
  transform(objs: MyType[]) {
    return objs.map(addx); // Your function
  }
}

Now, inside your template, you should use the object returned by your mapping function.

Source: https://angular.io/guide/pipes#flyingheroespipe