Angular 6+: передать имя массива в ngFor из @input - PullRequest
Новая
       11

Angular 6+: передать имя массива в ngFor из @input

0 голосов
/ 05 июня 2019

Я создал компонент списка, успешно работающий с массивом элементов и выводящий его данные через цикл *ngFor.

Теперь я хочу повторно использовать этот компонент и добавить больше возможных массивов данных на выбор. для этого был создан @input, позволяющий мне передавать имя массива «on» компоненту, где бы он ни использовался, но когда я пытаюсь передать его в *ngFor, я получаю сообщение об ошибке.

мой код TS: 

@Input() listName : string;
list1: any = [
 {title: 'title1'},
 {title: 'title2'},
 {title: 'title3'},
]
list2: any = [
 {title: 'titlea'},
 {title: 'titleb'},
 {title: 'titlec'},
]

компонент выглядит так: 

<app-listcomp listName="list1"></app-listcomp>

Я могу понять, что это неверный синтаксис внутри компонента: 

*ngFor="let listItem of {{listName}}"

но не могу выйти, чтобы найти, что является правильным способом передачи имени массива через @Inpu t (или любым другим правильным способом).

когда я использую определенное имя массива в цикле *ngFor - оно, конечно, работает идеально.

Ответы [ 2 ]

1 голос
/ 05 июня 2019

Ну, вы можете сделать что-то вроде этого

Класс: 

getList() {
  return this[this.listName];
}

Шаблон: 

*ngFor="let listItem of getList()"
0 голосов
/ 05 июня 2019

Существует несколько решений, но это зависит от глобального контекста и того, что вам действительно нужно.

Самое простое решение - просто передать ожидаемый массив компоненту.

В коде компонента: 

@Input()
myList: any[];

В шаблоне: 

*ngFor="let listItem of myList"

Но если вам действительно это нужно, работайте, как упомянуть вВы спрашиваете, просто используйте метод.Конечно, вам нужно будет передать словарь (или карту) массивов, проиндексированных по их имени.

В коде компонента: 

@Input()
myLists: {[name: string]: any[]}; // dictionary of arrays indexed by name

getList(name: string): any[] {
   return this.myLists[name];
}

В шаблоне: 

*ngFor="let listItem of getList('the name I want')"

Редактировать

Из того, что я вижу в вашем вопросе с момента вашего редактирования, я могу дать вам ответ, который ближе к тому, чтовы ожидаете.

В коде компонента: 

get selectedList(n): any[] {
   return this[this.listName];
}

В шаблоне: 

*ngFor="let listItem of selectedList"
...