如何使用ngfor角度2填充分级数据

Question

我想使用angualr 2填充表，数据具有层次结构。我正在使用以下方法

<tr *ngFor="let branch of branches">
    <td (click)="onExpandClick(branch)" contenteditable="true">{{branch.name}}</td>
    <td contenteditable="true">Rice A</td>
    <td><label class="switch"> <input type="checkbox"
                                            id="hide-show-keyfacts" checked> <span
                                            class="slider round onoff"></span>
                                    </label></td>
    <tr *ngFor="let c of branch.bi">
        <td (click)="onExpandClick(branch)" contenteditable="true">{{c.name}}</td>
        <td contenteditable="true">Rice A</td>
        <td><label class="switch"> <input type="checkbox"
                                            id="hide-show-keyfacts" checked> <span
                                            class="slider round onoff"></span>
                                    </label></td>

    </tr>
</tr>

但它给了我-

未知错误:模板解析错误:意外结束标记"tr“

我该怎么解决这个问题。

Answer 1

您可以尝试将td拆分到下一行，这样它就可以与所有其他tr对齐，这是css的一个示例：

​

tr {
  display: block
}

td.break {
  float: left;
  line-height: 22px;
}

<table>
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
    <td>Col 4</td>
    <td class="break">
      <table>
        <tr>
          <td>Inner Col 1</td>
          <td>Inner Col 2</td>
          <td>Inner Col 3</td>
          <td>Inner Col 4</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

​

必须将内部tr添加到td中。

<tr *ngFor="let branch of branches">
    <td (click)="onExpandClick(branch)" contenteditable="true">{{branch.name}}</td>
    <td contenteditable="true">Rice A</td>
    <td>
        <label class="switch">
            <input type="checkbox" id="hide-show-keyfacts" checked>
            <span class="slider round onoff"></span>
        </label>
    </td>
    <td class="break">
        <table>
            <tr *ngFor="let c of branch.bi">
                <td (click)="onExpandClick(branch)" contenteditable="true">{{c.name}}</td>
                <td contenteditable="true">Rice A</td>
                <td>
                    <label class="switch">
                        <input type="checkbox" id="hide-show-keyfacts" checked>
                        <span class="slider round onoff"></span>
                    </label>
                </td>
            </tr>
        </table>
    </td>
</tr>

Answer 2

我用纳克容器解决了这个问题-

    <ng-container *ngFor="let branch of branches">
                            <tr   >
                                <td (click)="onExpandClick(branch)" contenteditable="true">{{branch.name}}</td>
                                <td contenteditable="true">Rice A</td>
                                <td><label class="switch"> <input type="checkbox"
                                        id="hide-show-keyfacts" checked> <span
                                        class="slider round onoff"></span>
                                </label></td>
                                </tr>
                            <tr *ngFor="let c of branch.bi" ngClass=""  >
                                <td (click)="onExpandClick(branch)" contenteditable="true">{{c.name}}</td>
                                <td contenteditable="true">Rice A</td>
                                <td><label class="switch"> <input type="checkbox"
                                        id="hide-show-keyfacts" checked> <span
                                        class="slider round onoff"></span>
                                </label></td>
                            </tr>
                      </ng-container>