如何根据字符串值在 Angular 中创建表？答案

【问题标题】：How to create a table in Angular based on a string value?如何根据字符串值在 Angular 中创建表？
【发布时间】：2017-12-30 10:44:00
【问题描述】：

我正在使用 Angular 4/5，我必须根据字符串值在 Angular 中创建几个表。这是我为创建表格而制作的模型。

class NameValuePair {
    Name: string;
    Value: string;
}

export class Family {
    Properties: Array<NameValuePair>;
    PropertyType: string;
}

下面给出的是表格将包含的硬编码值。

export const list1: Family[] =
[
    {
      Properties: [
        {
          Name: "A",
          Value: "1"
        },

        {
          Name: "B",
          Value: "2"
        },
        {
          Name: "C",
          Value: "3"
        }
      ],
      PropertyType: "Type 1"
    },
    {
      Properties: [
        {
          Name: "A",
          Value: "10"
        },

        {
          Name: "B",
          Value: "20"
        },
        {
          Name: "C",
          Value: "30"
        }
      ],
      PropertyType: "Type 1"
    },
    {
      Properties: [
        {
          Name: "A",
          Value: "100"
        },

        {
          Name: "B",
          Value: "200"
        },
        {
          Name: "C",
          Value: "300"
        }
      ],
      PropertyType: "Type 2"
    }
  ]

现在，这里要注意的主要是表将基于 PropertyType 创建。如上述结构，数组的前两个元素的 PropertyType 相同，即 Type 1，因此将创建 2 个表。一个带有标题/标题：Type 1，另一个带有标题：Type 2。第二个数组元素的properties[] 数组将成为第一个表的第二行。我无法找到有关如何基于此 PropertyType 字符串值创建表的逻辑。但是，这是我在component.html文件中写的，但是这个逻辑是不正确的。

<div class="container pt-4" *ngFor="let element of list;let i = index">
  <ng-container *ngIf="list[i].PropertyType == list[i+1].PropertyType">
    <div style="padding-left:250px;font-size: 20px" class="pb-2">{{element.PropertyType}}</div>

    <table id="{{element.PropertyType}}" class="table table-striped table-bordered table-responsive pb-3 mx-auto">
      <thead style="height:40px">
        <tr align="center">
          <th *ngFor="let property of element.Properties" style="font-size: 20px">{{property.Name}}</th>
        </tr>
      </thead>

      <ng-container *ngFor="let element1 of list">
          <tr align="center" *ngIf="element.PropertyType == element1.PropertyType">
            <td *ngFor="let property of element1.Properties; let propertyIndex = index" style="width: 200px">
              <ng-container [ngSwitch]="propertyIndex">         
                <div *ngSwitchDefault style="font-size: 20px">{{property.Value}}</div>
              </ng-container>
            </td>
          </tr>
      </ng-container>
    </table>
  </ng-container>
</div>

这里的

list指的是上面提到的list1 const数组。请帮忙。

【问题讨论】：

标签： arrays angular multidimensional-array ngfor angular5

【解决方案1】：

这是完整的逻辑，我没有添加 css，因为没有要求。使用它正在工作https://stackblitz.com/edit/angular-hd9jey

import {
  Component
} from '@angular/core';
import {
  list1
} from './list1';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',

})
export class AppComponent {
  tableArray = [];
  constructor() {
    let tableObject = {};
    list1.forEach(i => {
      if (tableObject[i.PropertyType]) {
        tableObject[i.PropertyType].push(i);
      } else {
        tableObject[i.PropertyType] = [i];
      }
      this.tableArray = Object.entries(tableObject);
    });
  }

}

<div class="container pt-4" *ngFor="let table of tableArray;index as i">

  <div style="padding-left:250px;font-size: 20px" class="pb-2">{{table[0]}}</div>
  <table id="{{table[0]}}" class="table table-striped table-bordered table-responsive pb-3 mx-auto">
    <thead style="height:40px">
      <tr align="center">
        <th *ngFor="let property of table[1][0].Properties" style="font-size: 20px">
          {{property.Name}}</th>
      </tr>
    </thead>


    <tr *ngFor="let property of table[1];" align="center">
      <td *ngFor="let va of property.Properties">
        {{va.Value}}
      </td>
    </tr>

  </table>
</div>

【讨论】：

【解决方案2】：

您想首先将您的 list1 数据处理成更好的格式：例如

export interface CustomTable {
  header: string,
  rows: Properties[]
}

const tables: CustomTable[] [];

list1.forEach(family => {
  // Check if this type is already in the table.
  const myTable: CustomTable = tables.find(customTable => customTable.header === family.propertyType);
  if (myTable) {
    // If it is, then add a new row
    myTable.rows.push(family.Properties);
  } else {
    // If not, create a new table
    myTable.rows.push({
      header: family.propertyType,
      rows: [family.Properties]
    });
  }
});

然后相应地更改您的 html。你可能想要

<ng-container ngFor="let table of tables">

在其中某处：

<tr *ngFor=let row of tables.rows>

【讨论】：