Angular: возможно ли создать переменную внутри шаблона для цикла? - PullRequest
0 голосов
/ 11 июля 2019

У меня есть * 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);
}

Ответы [ 2 ]

0 голосов
/ 11 июля 2019

В синтаксисе ngFor можно использовать что-то под названием «Pipe».

Следующая документация использует его для фильтрации списка 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

0 голосов
/ 11 июля 2019

Может быть, я не совсем понял, что вы хотите, но разве не подойдет простая карта?в частности

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);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...