Чтобы отобразить строку и ее подстроки в таблице в шаблоне Angular 2

Question

Я использую Angular 2 в моем проекте. Я столкнулся со сценарием, в котором у меня есть список элементов, и элемент может иметь подпункты. Я должен показать все элементы в таблице (включая подпункты). Я использовал * ngFor для каждого элемента списка элементов в теге tr. Но так как я также должен отображать подпункты, я не могу сделать это одним * ngFor. какой подход я могу использовать для достижения этой цели? Ищете ваше предложение. Пожалуйста, помогите мне. Вот что я хочу показать.

 items= [
    { name : 'bag', subitems: [{ name : 'pen' }, { name : 'pen1' }] },
    { name : 'chair' }
  ];

Таблица должна иметь следующие строки:

 bag
 pen
 pen1
 chair

Пожалуйста, помогите.

angular angular2-template ngfor

0

Meenakshi Kumari 24 Апр 2017 в 16:00

Answer 1

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

5

Julia Passynkova 24 Апр 2017 в 13:54

Answer 2

Вы можете сгладить массив элементов:

@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;
    }, 
    []
  );
}

Plunker

1

hiper2d 24 Апр 2017 в 13:48

Чтобы отобразить строку и ее подстроки в таблице в шаблоне Angular 2

2 ответа

Похожие вопросы

Новые вопросы

angular