Question

我面临着创建带有嵌套对象数组的表的问题。

我有一个具有以下架构的数组：

array = [
    {
        id: 'Column1',
        rows: {
            row1: 'A',
            row2: 'B',
            row3: 'C',
            row4: 'D'
        }
    },
    {
        id: 'Column2',
        rows: {
            row1: 'E',
            row2: 'F',
            row3: 'G',
            row4: 'H'
        }
    },
    {
        id: 'Column3',
        rows: {
            row1: 'I',
            row2: 'J',
            row3: 'K',
            row4: 'L'
        }
    }
];

我正在尝试创建一个看起来像这样的表：

我能够创建列标题，但是我不知道该怎么做。

关于如何使用它的任何线索吗？

<table class="table table-users table-fixed table-striped">
    <caption></caption>
    <thead>
      <tr>
        <th scope="col" class="col-xs-2">
        </th>
        <th scope="col" class="col-xs-2" *ngFor="let col of array">{{col.id}}</th>
      </tr>
    </thead>
    <tbody class="table-data">
    </tbody>
</table>

谢谢您的时间。

Answer 1

您需要像这样使用嵌套的*ngFor-

<table border='1' class="table table-users table-fixed table-striped">
    <caption></caption>
    <thead>
      <tr>
        <th scope="col" class="col-xs-2">
        </th>
        <th scope="col" class="col-xs-2" *ngFor="let col of array">{{col.id}}</th>
      </tr>
    </thead>
    <tr *ngFor="let col of array">
      <th *ngFor="let item of col.rows | keyvalue; let i = index">
        <span *ngIf='!i'>{{item.key}} </span>
        <span *ngIf='i'>{{item.value}}</span>
        </th>
    </tr>
</table>

Working Example

Answer 2

个人而言，我将使您的模板尽可能简单，并在检索到数据后立即对其进行转换。 Something like this：

public table = this.convertToTable(this.array);

private convertToTable(array: { id: string, rows: any }[]) {
    // get the property name and value of the columns rows.
    // sort the array by length so the first and largest array can be used to get the properties names.
    const columnRows = array.map(a => ((Object as any).entries(a.rows)).
        map(([rowHeader, rowValue]) => ({ rowHeader, rowValue })))
        .sort((a, b) => b.length - a.length);
    // get the headers
    const headers = array.map(a => a.id);
    // create rows by looping through the largest array with rowValues
    const rows = columnRows.length > 0 ?
        columnRows[0].map((v, rowIndex) => {
            const rowValues = headers.map((_, columnIndex) => {
                const row = columnRows.length > columnIndex ? columnRows[columnIndex] : [];
                const rowValue = row.length > rowIndex ? row[rowIndex].rowValue : null;
                return rowValue;
            });
            return {
                rowHeader: v.rowHeader,
                rowValues
            };
        }) : [];
    return { headers, rows };
}

HTML：

<table border='1' class="table table-users table-fixed table-striped">
    <caption></caption>
    <thead>
      <tr>
        <th scope="col" class="col-xs-2">
        </th>
        <th scope="col" class="col-xs-2" *ngFor="let header of table.headers">
          {{header}}</th>
      </tr>
    </thead>
    <tr *ngFor="let row of table.rows">
      <td>{{row.rowHeader }}</td>
      <td *ngFor="let value of row.rowValues">
        {{value}}
        </td>
    </tr>
</table>

Answer 3

所以最后我找到了一种解决方案，将原始数组拆分为2，原始数组用于列，第二个数组用于显示行。

之后，创建了一种仅获取每一行值的方法。

以下是解决方法：https://stackblitz.com/edit/angular-bn2mgw

用对象中的行创建表

3 个答案: