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-

解决了它

s : XMLBTC

如何使用ngfor角度2填充层次结构数据

2 个答案: