Question

我的模板中有一个* ngFor，我想在每个项目上调用一个函数。该函数返回一个对象，该对象具有要在模板中显示的三个值。现在的问题是我要调用该函数三次以显示对象的所有属性。

我想做的是将结果绑定到变量，这样我就可以使用变量而不是调用函数3次。所以我想要实现的是以下内容：

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

也许我不确定您想要的是什么，但是一个简单的“地图”不会做到吗？特别地

let newList = lists.map(addx);

您可以将newList用于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

您可以在ngFor语法中使用称为“管道”的东西。

以下文档使用它来过滤ngFor列表，但也可以使用您定义的函数来映射元素。

您的模板将类似于：

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

还有您的管道：

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
  }
}

现在，在模板内部，您应该使用映射函数返回的对象。

来源：https://angular.io/guide/pipes#flyingheroespipe

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

2 个答案: