javascript - 带有动态标题和单元格的 Angular 7 Material 表

Question

考虑到我从像这样的 API 获取对象数组(用户可以选择框来选择年份、类型并输入值):

[
  {
    "year": 2019,
    "type": "Salaries",
    "value": 100
  },
  {
    "year": 2019,
    "type": "Projects",
    "value": 78
  },
  {
    "year": 2018,
    "type": "Projects",
    "value": 500
  },
  {
    "year": 2018,
    "type": "Others",
    "value": 500
  },
]

我需要每年显示这些数据，如下所示:

| Year | Salaries | Pojects | Others |
-------------------------------------
| 2019 |   100    | 78      |        |
-------------------------------------
| 2018 |          | 500     | 500    |

我无法弄清楚的部分是如何循环遍历数组来构建数组头，然后每年在相应的类型上放置正确的值...感谢您的帮助。

Answer 1

为了实现您的目标，您需要使用从 API 接收的数据创建一个新数组。为了给出我的解决方案，我假设您从 API 收到了如下所示的数据数组。

[{ "year": 2019, "type": "Salaries", "value": 100 },
 { "year": 2019, "type": "Projects", "value": 78 },
 { "year": 2018, "type": "Projects", "value": 500 },
 { "year": 2018, "type": "Others", "value": 500 },
 { "year": 2019, "type": "Others", "value": 230 },
 { "year": 2018, "type": "Salaries", "value": 900 }]

要在您的问题中的表格中显示上述数据，您必须将其转换为有意义的数组，如下所示。

[{ "year": 2019, "salary": 100, "project": 78, "other": 230 },
    { "year": 2018, "salary": 900, "project": 500, "other": 500 }]

我假设某一年没有相同类型的重复记录，如下所示。

{ "year": 2019, "type": "Salaries", "value": 100 }
{ "year": 2019, "type": "Salaries", "value": 200 }

如果有像上面这样的重复项最后一个元素的值将被视为值。

您必须实现新函数来创建 displayData 数组，如下所示。

typescript

export class MyComponent  {
  data = [
 { "year": 2019, "type": "Salaries", "value": 100 },
 { "year": 2019, "type": "Projects", "value": 78 },
 { "year": 2018, "type": "Projects", "value": 500 },
 { "year": 2018, "type": "Others", "value": 500 },
 { "year": 2019, "type": "Others", "value": 230 },
 { "year": 2018, "type": "Salaries", "value": 900 }];

displayData: any = [];

 constructor() {
   this.createDisplayData()
 }

 createDisplayData(): void {

   for (let i = 0; i < this.data.length; i++) {

      let type: string;

      if (this.data[i].type === "Salaries")
        type = 'salary';
      else if (this.data[i].type === "Projects") 
        type = 'project';
      else 
        type = 'other';

     const found = this.displayData.find(v => v.year === this.data[i].year);

     if (!found) {
       let object = {};
       object['year'] = this.data[i].year;
       object[type] = this.data[i].value
       this.displayData.push(object);
     }
     else {
       found[type] = this.data[i].value;
     }
   }
 }
}

HTML

<table style="width: 100%">
  <tr>
    <th>Year</th>
    <th>Salaries</th>
    <th>Pojects</th>
    <th>Others</th>
  </tr>
  <tr *ngFor="let data of displayData">
    <td style="text-align: center">{{data.year}}</td>
    <td style="text-align: center">{{data.salary}}</td>
    <td style="text-align: center">{{data.project}}</td>
    <td style="text-align: center">{{data.other}}</td>
  </tr>
</table>

查找 StackBlitz Demo Here .

Update on suggestion by Comment.

您可以执行此操作的其他方法是使用 Array.reduce() 函数而不是 for 循环，如下所示。

TS

 createDisplayData(): void {

   this.displayData = this.data.reduce((accumulator, currentValue) => {

     const found = accumulator.find(v => v.year === currentValue.year);
     if (!found) {

       let object = {};
       object['year'] = currentValue.year;
       object[currentValue.type] = currentValue.value;
       accumulator.push(object);
     } else {

       found[currentValue.type] = currentValue.value;
     }
     return accumulator;
   }, []);
 }

HTML

<table style="width: 100%">
  <tr>
    <th>Year</th>
    <th>Salaries</th>
    <th>Pojects</th>
    <th>Others</th>
  </tr>
  <tr *ngFor="let data of displayData">
    <td style="text-align: center">{{data.year}}</td>
    <td style="text-align: center">{{data.Salaries}}</td>
    <td style="text-align: center">{{data.Projects}}</td>
    <td style="text-align: center">{{data.Others}}</td>
  </tr>
</table>

查找 StackBlitz Demo .