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

据我所知（我可能记得错了），角度对对象键使用字母排序。

您可以做的是创建一个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
     }
     }
}

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

4 个答案: