Я использую Angular 2 в моем проекте. Я столкнулся со сценарием, в котором у меня есть список элементов, и элемент может иметь подпункты. Я должен показать все элементы в таблице (включая подпункты). Я использовал * ngFor для каждого элемента списка элементов в теге tr. Но так как я также должен отображать подпункты, я не могу сделать это одним * ngFor. какой подход я могу использовать для достижения этой цели? Ищете ваше предложение. Пожалуйста, помогите мне. Вот что я хочу показать.
items= [
{ name : 'bag', subitems: [{ name : 'pen' }, { name : 'pen1' }] },
{ name : 'chair' }
];
Таблица должна иметь следующие строки:
bag
pen
pen1
chair
Пожалуйста, помогите.
2 ответа
<div>
<table>
<ng-container *ngFor="let item of items">
<tr>
<td>{{item.name}}</td>
<td>hi</td>
</tr>
<tr *ngFor="let subitem of item.subitems">
<td>{{subitem.name}}</td>
<td>hi</td>
</tr>
</ng-container>
</table>
</div>
Вы можете сгладить массив элементов:
@Component({
selector: 'my-app',
template: `
<table>
<tr *ngFor="let item of flatItems">
<td>{{item.name}}</td>
</tr>
</table>
`,
})
export class App {
items= [
{ name : 'bag', subitems: [{ name : 'pen' }, { name : 'pen1' }] },
{ name : 'chair' }
];
flatItems = this.items.reduce(
(accumulator, itemValue) => {
accumulator = accumulator.concat({name: itemValue.name});
accumulator = accumulator.concat(itemValue.subitems);
return accumulator;
},
[]
);
}
Похожие вопросы
Новые вопросы
angular
Вопросы по Angular (не путать с AngularJS), веб-фреймворку от Google. Используйте этот тег для угловых вопросов, которые не относятся к конкретной версии. Для более старой веб-платформы AngularJS (1.x) используйте тег angularjs.