Angular 7：来自API的显示数据按HTML中的升序排序

Question

我是 Angular 新手，我正在使用 Angular 7

我调用 api 并获取要在 html 中显示的数据。数据是关于业务时间的：

"data": {
    "businesstime": {
      "Monday": {
        "start": "09:00 am",
        "end": "07:00 pm",
        "is_off": false
      },
      "Tuesday": {
        "start": "09:00 am",
        "end": "07:00 pm",
        "is_off": false
      },
      "Wednesday": {
        "start": "09:00 am",
        "end": "07:00 pm",
        "is_off": false
      },
      "Thursday": {
        "start": "09:00 am",
        "end": "07:00 pm",
        "is_off": false
      },
      "Friday": {
        "start": "09:00 am",
        "end": "07:00 pm",
        "is_off": false
      },
      "Saturday": {
        "start": "11:25 am",
        "end": "05:20 pm",
        "is_off": false
      },
      "Sunday": {
        "start": "09:00 am",
        "end": "04:00 pm",
        "is_off": true
      }
    }
  }

在我的 html 中，我尝试这样显示：

<ul class="listar-openinghours">
                    <li *ngFor="let businesstime of detail['businesstime'] | keyvalue ; let day=index">
                      <span>{{businesstime.key}}</span>
                      <span  *ngIf="detail['businesstime'][businesstime.key]['is_off'] == '0' " >  {{detail['businesstime'][businesstime.key]['start'] }}  - {{  detail['businesstime'][businesstime.key]['end'] }} </span>
                      <span  *ngIf="detail['businesstime'][businesstime.key]['is_off'] == '1' " >  Off Day </span>
                    </li>

                  </ul>

我的问题是数据没有按照 API 数据的顺序循环显示：

Friday 09:00 am - 07:00 pm
Monday 09:00 am - 07:00 pm
Saturday 11:25 am - 05:20 pm
Sunday Off Day
Thursday 09:00 am - 07:00 pm
Tuesday 09:00 am - 07:00 pm
Wednesday 09:00 am - 07:00 pm 

我如何将来自Monday 的数据显示为 API 密钥订单？

一定是这样的：

Monday 09:00 am - 07:00 pm
Tuesday 09:00 am - 07:00 pm
....
Sunday Off Day

它的显示与 API 顺序相同，例如从 Monday 开始

Answer 1

据我记得（我可能记错了）angular 使用字母排序作为对象键。

您可以做的是创建一个 days 数组并循环遍历它而不是您的对象。

ts

  days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday","Saturday","Sunday"];

html

<ul class="listar-openinghours">
  <li *ngFor="let day of days; let day=index">
    <span>{{day}}</span>
        <span  *ngIf="data['businesstime'][day]['is_off'] == '0' " >  {{data['businesstime'][day]['start'] }}  - {{  data['businesstime'][day]['end'] }} </span>
    <span  *ngIf="data['businesstime'][day]['is_off'] == '1' " >  Off Day </span>
</ul>

Demo

Answer 2

JS根据键值对对象进行排序

Answer 3

如果我们在 HTML 部分上的计算更少，那就太好了

HTML

<ul class="listar-openinghours">
    <li *ngFor="let businesstime of givenArray; let day=index">
        <span *ngIf="!businesstime.is_off">{{businesstime.day}} {{businesstime.start}} - {{businesstime.end}}</span>
        <span *ngIf="businesstime.is_off">{{businesstime.day}} Off Day</span>
    </li>

</ul>

ts

    const expectedFormatData = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday","Saturday","Sunday"];
    var size = Object.keys(this.data.businesstime).length;
    for (let property in this.data.businesstime) {
        for (let index = 0; index < expectedFormatData.length; index++) {
            if (expectedFormatData[index] === property) {
              this.givenArray.push(this.data.businesstime[property]);
              console.log(property);
              this.givenArray[this.givenArray.length - 1].day = property; 
            }
        }
    }

Answer 4

我认为它正在根据您的密钥循环。我建议您的键是否在升序。然后你添加归档日和价值日。 例如

"data": {
    "businesstime": {
     "1313": {
        "day"   : "wednesday",
        "start" : "09:00 am",
        "end"   : "07:00 pm",
        "is_off": false
     },
     "1314":{
        "day"   : "thursday",
        "start" : "09:00 am",
        "end"   : "07:00 pm",
        "is_off": false
     }
     }
}