Угловая 2 привязка данных к объекту
Когда вы проходите через объект, есть ли способ, которым я могу динамически помещать угловые обработчики внутри угловых обработчиков?
- Array 'editor' со списком элементов. Он имеет 4 элемента верхнего уровня с id (1,2,3) Он имеет 2 подпункта я детей под ID 1 с идентификатором (4,5).
Я могу просмотреть элементы и отобразить их.
В первом элементе с id 1 он имеет номер (4,5) - это ID из главного массива редактора. Поэтому вместо рендеринга строки 4 и 5 я хотел бы отобразить объект из редактора с ID 4 и Object с ID 5.
Если я делаю {{editor [0].id}} - он работает, но [0] не является динамическим. Поэтому я попробовал {{editor [{{subitem}}]. Id}} - но это дало мне ошибку.
Вот HTML
<ul>
<li *ngFor="let item of editor">
{{item.id}}
<ul>
<li *ngFor="let subitem of item.children">
{{subitem}}
{{editor[0].id}}
</li>
</ul>
</li>
</ul>
Угловой 2 компонент
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'editor',
templateUrl: './editor.component.html',
styleUrls: ['./editor.component.css']
})
export class EditorComponent implements OnInit {
editor = {};
constructor() {
this.editor = editor;
console.log('editor is', this.editor[1].item);
}
ngOnInit() {
}
}
const editor = [
{
id: 1,
item: 'pen',
menuView: 'edit-view',
mainView: 'edit-view',
children:[4 , 5]
},
{id: 2, item: 'ruller', menuView: 'edit-view',mainView: 'edit-view'},
{id: 3, item: 'pencil', menuView: 'pencil-view',mainView: 'pencil-view'},
{id: 4, item: 'black', menuView: 'pen-black',mainView: 'pen--black'},
{id: 5, item: 'white', menuView: 'pen-white',mainView: 'pen-white'},
{id: 6, item: 'edit', menuView: 'edit-white',mainView: 'edit-white'},
{id: 7, item: 'edit', menuView: 'edit-white',mainView: 'edit-white'}
];
Как показать в первом цикле только элемент с идентификатором 1, 6,7? Создать собственный канал? Если я получил массив из 1000 id, это лучшая вещь?
<li *ngFor="let item of editor">
{{item.id}}
<ul *ngIf="item.children">
<li *ngFor="let subitem of item.children">
{{getChild(subitem) | json}}
</li>
</ul>
</li>
Вы должны иметь метод ниже
getChild(id){
console.log(_.find(this.editor, { 'id': id}));
return _.find(this.editor, { 'id': id});
}
Примечание. Я использую библиотеку lodash, потому что мне это нравится. LIVE DEMO
Поскольку ваш объект на самом деле является массивом объектов, вы можете использовать настраиваемый канал для фильтрации массива:
@Pipe({
name: 'findById'
})
export class FindByIdPipe {
transform(arr: any[], id: number) {
return arr.find(x => x.id === id);
}
}
затем в вашем шаблоне
{{ (editor | findById: subitem).item }}
Не уверен, что я понял, но... Вы должны использовать индекс. Найдите "Локальные переменные" на этой странице
<ul>
<li *ngFor="let item of editor; let editorIndex = index">
{{item.id}}
<ul>
<li *ngFor="let subitem of item.children">
{{subitem}}
{{editor[editorIndex].id}}
</li>
</ul>
</li>
</ul>
Или вы можете просто использовать item:
<ul>
<li *ngFor="let item of editor">
{{item.id}}
<ul>
<li *ngFor="let subitem of item.children">
{{subitem}}
{{item.id}}
</li>
</ul>
</li>
</ul>
