Question

我有3个数据数组。为了清楚起见，将数组称为DATA_CENT，DATA_NORTH和DATA_WEST。它们每个都包含另一个称为数据的数组。我需要将此数据数组提取到表中。

如您所见，我为每个新的大列创建一个新表。然后我需要将数据提取到每个列中。

<table *ngFor="let elem of COLUMN_NAMES">
    <thead>
        <tr>
            <th colspan="4" class="top">{{elem}}</th>
        </tr>
        <tr>
            <th class="top-1">all</th>
            <th class="top-1">done</th>
            <th class="top-1">ctrl</th>
            <th class="top-1">rjct</th>
        </tr>
    </thead>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tbody *ngIf="showcent">
        <tr *ngFor="let comp of elem.data">
            // Here I need to render DATA_CENT.data information
            <td>{{comp.all}}</td>
            <td>{{comp.done}}</td>
            <td>{{comp.ctrl}}</td>
            <td>{{comp.rjct}}</td>
        </tr>
    </tbody>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tbody *ngIf="shownorth">
        <tr *ngFor="let comp of elem1.data">
            // DATA_NORTH info
            <td>{{comp.all}}</td>
            <td>{{comp.done}}</td>
            <td>{{comp.ctrl}}</td>
            <td>{{comp.rjct}}</td>
        </tr>
    </tbody>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tbody *ngIf="showwest">
        <ng-container>
            <tr *ngFor="let comp of elem1.data">
                //DATA_WEST info
                <td>{{comp.all}}</td>
                <td>{{comp.done}}</td>
                <td>{{comp.ctrl}}</td>
                <td>{{comp.rjct}}</td>
            </tr>
        </ng-container>
    </tbody>
</table>

我在渲染该表时遇到麻烦。我无法正确放置循环-有时单元格太多，有时它们不适合表格。

这是表格的外观：

PS（为了更好地理解）：第一栏中的前3个单元格是按钮。当我单击它们时，与该按钮关联的数据会折叠/展开。

如果需要，这里是项目的GitHub：https://github.com/kulaska/Table-app/tree/table_el_toggle_branch

Answer 1

您的问题似乎是由于没有遍历data数组造成的。

代替：

<td>{{comp.data.all}}</td>

您需要

<td>
    <tr *ngFor="let data of comp.data">
        <td>{{data.all}}</td>
    </tr>
</td>

类似的内容，但您需要遍历data数组。

角表渲染问题（渲染太多单元）

1 个答案: