Angular 角度2在表中添加下一个兄弟

我需要向表中添加一个新行，也就是说，创建一个新元素并将其插入到具有新数据的对应行之后。 您可以看到我已经做了什么，但我不太擅长在angular 2中使用DOM 这个桌子应该像这里的树一样工作

component.html

    <table class="mat-table mat-elevation-z8">
  <thead>
  <tr class="mat-header-row">
    <th class="mat-header-cell">Наименование</th>
    <th class="mat-header-cell">Тип</th>
    <th class="mat-header-cell">Действия</th>
  </tr>
  </thead>
  <tbody>
  <tr class="mat-row"
      *ngFor="let item of items">
    <td class="mat-cell">
      <span *ngIf="item.has_child"
                (click)="onClick($event)">>
      </span>
      <span>{{item.title}}</span>
    </td>
    <td class="mat-cell"> {{item.type.system_name}}</td>
    <td class="mat-cell"> {{item}}</td>
  </tr>

  </tbody>
</table>

---

样品溶液可以是：

ts:

html:

Наименование
Тип
Действия
>
{{item.title}
{{item.type.system_name}
{{item}}
{{item.details}

我在item对象中添加了额外的参数，它是

展开的

，最初设置为false，这意味着下面的行将被隐藏

---

单击该>箭头，您将执行

showDetails

，它只需用详细信息展开行即可。

我认为它不起作用，因为该表将非常大，并且有许多类似于此处的级别

 import {Component, ElementRef, OnInit, Renderer2} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  items: any = [
    {
      'id': '48ff51f8-a361-4430-a508-bf1f866db785',
      'type': {
        'system_name': 'default'
      },
      'enabled': true,
      'can_remove': true,
      'has_child': false,
      'has_problem_link': null,
      'has_problem_locale': null,
      'title': 'Расстояние'
    },
    {
      'id': '48a941b2-6fc9-4f8b-bfbc-8dcbfc6ce971',
      'type': {
        'system_name': 'default'
      },
      'enabled': true,
      'can_remove': true,
      'has_child': true,
      'has_problem_link': null,
      'has_problem_locale': null,
      'title': 'Температура'
    }
  ];

  constructor(private elRef: ElementRef,
              private renderer: Renderer2) {

  }

  onClick(event) {
    const tr = this.renderer.createElement('tr');
    console.log(event.path[2]);
    this.renderer.appendChild(tr, this.renderer.createText('Namaste!!!!!'));
    this.renderer.appendChild(event.path[2], tr);


  }
}

items = [
    {
        has_child: true,
        title: 'testTitle',
        type: {
            system_name: 'testSystemName'
        },
        expanded: false,
        details: 'test details test details test details test details test details'
    }
];

showDetails(item) {
    item.expanded = true;
}

<table class="mat-table mat-elevation-z8">
    <thead>
    <tr class="mat-header-row">
        <th class="mat-header-cell">Наименование</th>
        <th class="mat-header-cell">Тип</th>
        <th class="mat-header-cell">Действия</th>
    </tr>
    </thead>
    <tbody>
        <ng-container  *ngFor="let item of items">
            <tr class="mat-row">
                <td class="mat-cell">
                    <span *ngIf="item.has_child" (click)="showDetails(item)">></span>
                    <span>{{item.title}}</span>
                </td>
                <td class="mat-cell"> {{item.type.system_name}}</td>
                <td class="mat-cell"> {{item}}</td>
            </tr>
            <tr *ngIf="item.expanded">
                <td colspan="3">
                    {{item.details}}
                </td>
            </tr>
        </ng-container>
    </tbody>
</table>