Угловая 2 привязка данных к объекту

72
9

Когда вы проходите через объект, есть ли способ, которым я могу динамически помещать угловые обработчики внутри угловых обработчиков?

    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, это лучшая вещь?

спросил(а) 2017-03-18T22:59:00+03:00 3 года, 8 месяцев назад
1
Решение
74

<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

ответил(а) 2017-03-18T23:21:00+03:00 3 года, 8 месяцев назад
74

Поскольку ваш объект на самом деле является массивом объектов, вы можете использовать настраиваемый канал для фильтрации массива:

@Pipe({
name: 'findById'
})
export class FindByIdPipe {
transform(arr: any[], id: number) {
return arr.find(x => x.id === id);
}
}

затем в вашем шаблоне


{{ (editor | findById: subitem).item }}

Пример плунжера

ответил(а) 2017-03-18T23:14:00+03:00 3 года, 8 месяцев назад
43

Не уверен, что я понял, но... Вы должны использовать индекс. Найдите "Локальные переменные" на этой странице

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

ответил(а) 2017-03-18T23:11:00+03:00 3 года, 8 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема