角度递归表问题

Question

  

我成功实现了递归表。然后我在父tr中添加了（click）方法，以便调用子方法从数据库中获取数据以显示在子tr中。问题是我能够获取子中的数据。但是孩子tr立即出现并消失。当你点击父母tr时，请你帮助我显示孩子tr。

＆＃13;

＆＃13;

sampletree() {
  var = ele < HTMLTableElement > document.getElementById("tableid");
  ele.addEventListener("click", (ev: MouseEvent) => {
    var element = ev.target as HTMLElement;
    if (element.tagName !== "A")
      return false;

    ev.preventDefault();
    var row = element.closest("tr");
    var cls = row.classList[0];
    var lvl = +(cls.slice(-1)) + 1;
    cls = cls.slice(0, -1) + lvl;

    while ((row = nextTr(row)) && (row.className.includes(cls) || row.className.includes("open")))
      row.classList.toggle("open");
  });

  function nextTr(row) {
    while ((row = row.nextSibling) && row.nodeType != 1);
    return row;
  }
}
getTableParent1(): void {
    this.service.getTableParent1()
      .subscribe(TableParent1 => this.TableParent1 = TableParent1;

      }
    getChild(): void {
        this.service.getTablechild1()
          .subscribe(Tablechild1 => this.Tablechild1 = Tablechild11;

          }
        ngOnInit() {
          this.TableParent1();
          this.sampletree();
        }

＆＃13;

tbody>tr {
  display: none;
}


/* Simplified */

tr.level0,
tr.open {
  display: table-row;
}


/* Added colors for better visibility */


/* Added some more styling after comment */

tr td {
  padding: 0.2em 0.4em;
}

tr td:first-of-type {
  position: relative;
  padding: 0.2em 1em;
}

tr td a {
  color: #0e879a;
  text-decoration: inherit;
  position: relative;
  left: -0.73em;
  font-size: 19px;
}

tr.level1 td:first-of-type {
  padding-left: 1.5em;
}

tr.level2 td:first-of-type {
  padding-left: 2em;
}

＆＃13;

<table class="table table-bordered table-hover" id="tableid">
  <thead>
    <tr>
      <th>test1</th>
      <th>test2</th>
    </tr>
  </thead>
  <tbody>
    <tr class="level0" *ngFor="let tavles of tables">
      <td><a href="#" (click)="getChild()">+</a>{{tavles.test2}}</td>
      <td>{{tavles.test1}}</td>
    </tr>
    <tr class="level1" *ngFor="let child of tablechild">
      <td><a href="#">+</a>{{child.test1}}</td>
      <td><a href="#">+</a>{{child.test2}} </td>
    </tr>

＆＃13;

＆＃13;

＆＃13;