Angular 7：來自 API 的顯示數據按 HTML 中的 Assending 順序排序

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>

演示

Answer 2

JS根據key值對對象進行排序

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
     }
     }
}