angular - 分隔表中的周数

Question

目标：
每个星期编号及其日期和内容的新表。

样品的请求结果如下

Week 53
1   asdf    Wed Dec 30 2020 00:00:00 GMT+0100 (Central European Standard Time)  53
2   asdf    Wed Dec 31 2020 00:00:00 GMT+0100 (Central European Standard Time)  53


Week 2
3   asdf    Fri Jan 15 2021 00:00:00 GMT+0100 (Central European Standard Time)  2
4   asdf    Fri Jan 16 2021 00:00:00 GMT+0100 (Central European Standard Time)  2


Week 3
5   asdf    Fri Jan 20 2021 00:00:00 GMT+0100 (Central European Standard Time)  3
6   asdf    Fri Jan 21 2021 00:00:00 GMT+0100 (Central European Standard Time)  3

例如第 53 周、第 2 周和第 3 周的新表。（foodMenuId 1 和 2，属于第 53 周，应该在同一个表中）

问题：
我试图解决它，但我失败了。
您对如何解决有任何想法吗？

Stackblitz：
https ://stackblitz.com/edit/angular-ivy-pi7cdn?file=src/app/app.component.html
https://angular-ivy-pi7cdn.stackblitz.io

谢谢！

---

app.component.html

<hello name="{{ name }}"></hello>
<p>
    Start editing to see some magic happen :)
</p>

<div *ngFor="let item of GetAllFoodMenu">

    <table border=1>
        <tbody>
            <ng-template [ngIf]="item.rn === 1">
                <tr>
                    <td colspan="3">Vecka {{ item.week }}</td>
                </tr>
            </ng-template>

            <tr>
                <td>{{ item.foodMenuId }}</td>
                <td>{{ item.foodName }}</td>
                <td>{{ item.date }}</td>
                <td>{{ item.week }}</td>
            </tr>
        </tbody>
    </table>


    <br />
</div>

---

app.component.ts

import { Component, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;

  GetAllFoodMenu: FoodMenuDTO[] = [
    {
      foodMenuId: 1,
      foodName: "asdf",
      week: 53,
      rn: 1,
      date: new Date("2020-12-30T00:00:00")
    },
    {
      foodMenuId: 2,
      foodName: "asdf",
      week: 53,
      rn: 2,
      date: new Date("2020-12-31T00:00:00")
    },
    {
      foodMenuId: 3,
      foodName: "asdf",
      week: 2,
      rn: 3,
      date: new Date("2021-01-15T00:00:00")
    },
    {
      foodMenuId: 4,
      foodName: "asdf",
      week: 2,
      rn: 4,
      date: new Date("2021-01-16T00:00:00")
    },
    {
      foodMenuId: 5,
      foodName: "asdf",
      week: 3,
      rn: 5,
      date: new Date("2021-01-20T00:00:00")
    },
    {
      foodMenuId: 6,
      foodName: "asdf",
      week: 3,
      rn: 6,
      date: new Date("2021-01-21T00:00:00")
    }
  ];
}

export class FoodMenuDTO {
  public foodMenuId: number;
  public foodName: string;
  public week: number;
  public rn: number;
  public date: Date;
}

标签： angularangular10

Answer 1

更新：

app.component.html

    <style>
    .divborder {
        border: 1px solid black;
        margin-bottom: 5px;
    }
</style>
<hello name="{{ name }}"></hello>
<div class="divborder" *ngFor="let item of FoodMenuConsolidated; let index=index">
    Week {{item.WeekDay}}

    <br>
    <div *ngFor="let row of item.FoodMenus">
        <table>
            <td>{{ row.foodMenuId }}</td>
            <td>{{ row.foodName }}</td>
            <td>{{ row.date }}</td>
            <td>{{ row.week }}</td>
        </table>
    </div>

</div>

app.component.ts

import { Component, VERSION, OnInit } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular " + VERSION.major;

  FoodMenuConsolidated: any[] = [];

  GetAllFoodMenu: FoodMenuDTO[] = [
    {
      foodMenuId: 1,
      foodName: "asdf",
      week: 53,
      rn: 1,
      date: new Date("2020-12-30T00:00:00")
    },
    {
      foodMenuId: 2,
      foodName: "asdf",
      week: 53,
      rn: 2,
      date: new Date("2020-12-31T00:00:00")
    },
    {
      foodMenuId: 3,
      foodName: "asdf",
      week: 2,
      rn: 3,
      date: new Date("2021-01-15T00:00:00")
    },
    {
      foodMenuId: 4,
      foodName: "asdf",
      week: 2,
      rn: 4,
      date: new Date("2021-01-16T00:00:00")
    },
    {
      foodMenuId: 5,
      foodName: "asdf",
      week: 3,
      rn: 5,
      date: new Date("2021-01-20T00:00:00")
    },
    {
      foodMenuId: 6,
      foodName: "asdf",
      week: 3,
      rn: 6,
      date: new Date("2021-01-21T00:00:00")
    }
  ];

  ngOnInit() {
    var data = this.GetAllFoodMenu;
    var uniqueWeek = new Array();

    for (var i = 0; i < data.length; i++) {
      if (uniqueWeek.indexOf(data[i].week) < 0) {
        uniqueWeek.push(data[i].week);
      }
    }
    console.log(uniqueWeek.length);
    for (var i = 0; i < uniqueWeek.length; i++) {
      let data: any = {};
      data.WeekDay = uniqueWeek[i];
      data.FoodMenus = this.GetAllFoodMenu.filter(x => x.week == uniqueWeek[i]);
      this.FoodMenuConsolidated.push(data);
      console.log(data);
    }
  }
}

export class FoodMenuDTO {
  public foodMenuId: number;
  public foodName: string;
  public week: number;
  public rn: number;
  public date: Date;
}

输出

您需要创建另一个具有唯一周数的对象，然后创建具有每个周数的食品数组