时间戳

首页 > 解决方案 > 角表渲染问题（它渲染了太多的单元格）

javascript - 角表渲染问题（它渲染了太多的单元格）

问题描述

我有 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

标签： javascripthtmlcssangular

解决方案

看起来您的问题是由于没有遍历data数组。

代替：

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

你需要有

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

或类似的东西，但你需要遍历data数组。

推荐阅读