Angular 2 在渲染模板之前加载数据

Question

我有以下 html 代码：

 <tbody ng-repeat="caterory in data">
        <tr>
            <td [colSpan]="segment">{{ caterory.name }}</td>
        </tr>
        <tr ng-repeat="room in caterory.rooms">
            <td>{{room.room_no}}</td>
            <td [colSpan]="schedule.dayDiff" ng-repeat="schedule in room.reservations">{{schedule.firstName}}</td>
        </tr>
    </tbody>

当我运行时出现以下错误：

TypeError: Cannot read property 'name' of undefined

在我用谷歌搜索后，原因是在模板渲染时点头加载了数据。这是我的组件代码：How to load data first render template?

ngOnInit() {  this.reservationService.getUserBranch(this.authservice.getUserID()).subscribe(data => {
      this.userBranch = data.json().branch;
      this.brSelectedValue = this.userBranch[0].id
      this.reservationService.getPerson('').subscribe(data => {
        this.persons = data.json().person;
      });
      // TO DO
      this.fillDataRange();
    });
  }

这个 fillDataRange 是我的函数：

fillDataRange() { 
    this.reservationService.getReservation(this.brSelectedValue.toString(), this.intl.formatDate(this.dateFrom, 'yyyy-MM-dd'), this.intl.formatDate(this.dateTo, 'yyyy-MM-dd')).then(data => {
      this.data = data;
      console.log("Start", this.data);


      for (var i = 0; i < this.data.length; i++) { // Loop Through Categories
        if (this.data[i].rooms.length > 0) {
          for (var j = 0; j < this.data[i].rooms.length; j++) { // Loop Through Rooms from Category
            if (this.data[i].rooms[j].reservations.length > 0) {
              var sheduleArray = [];
              var a = 0;
              var d = a;
              var sumDayFiff = 0;
              for (var t = 0; t < this.data[i].rooms[j].reservations.length; t++) {
                var sheduleFrom = new Date(this.data[i].rooms[j].reservations[t].startDate);
                var sheduleTo = new Date(this.data[i].rooms[j].reservations[t].endDate);
                var status = this.data[i].rooms[j].reservations[t].status;
                var oneDay = 24 * 60 * 60 * 1000;
                var diffDays = Math.round(Math.abs((sheduleFrom.getTime() - sheduleTo.getTime()) / (oneDay)));
                for (a; a < this.segment; a++) {
                  var current = new Date(datesArray[d]);
                  if (current >= sheduleFrom && current <= sheduleTo) {
                    sheduleArray[a] = new Schedule(this.data[i].rooms[j].reservations[t].id, status, sheduleFrom, sheduleTo, this.data[i].rooms[j].reservations[t].id, this.data[i].rooms[j].reservations[t].id, this.data[i].rooms[j].reservations[t].id, this.data[i].rooms[j].reservations[t].id, diffDays, current, "reservationModal('" + current + "')", 'false', this.data[i].rooms[j].reservations[t].id, this.data[i].rooms[j].reservations[t].id);
                    a++;
                    d = d + diffDays;
                    sumDayFiff = sumDayFiff + diffDays;
                    break;
                  } else {
                    sheduleArray[a] = new Schedule("", 1, new Date(), new Date(), 1, "", "", "", 1, current, "reservationModal('" + current + "')", 'true', null, null);
                  }
                  d++;
                }
                sumDayFiff--;
              }
              for (a; a < this.segment - sumDayFiff; a++) {
                sheduleArray[a] = new Schedule("", 1, new Date(), new Date(), 1, "", "", "", 1, datesArray[d + 1], "reservationModal('" + 1 + "')", 'true', null, null);
                d++;
              }
              this.data[i].rooms[j].reservations = sheduleArray;
            } else {
              for (var f = 0; f < this.segment; f++) {
                this.data[i].rooms[j].reservations[f] = new Schedule("", 1, new Date(), new Date(), 1, "", "", "", 1, datesArray[f], "reservationModal('" + 1 + "')", '', null, null);
              }
            }
          }
        }
      }
      console.log("End", JSON.stringify(this.data));
    });
  }

Answer 1

您可以使用 ?. 而不是 . 以避免在 . 之前的值为 null

时出错

<tbody *ngFor="let caterory of data"> <!-- some changes in this line -->
    <tr>
        <td [colSpan]="segment">{{ caterory?.name }}</td> <!-- added ? -->
    </tr>
    <tr *ngFor="let room of caterory.rooms"> <!-- changes --->
        <td>{{room.room_no}}</td>
        <td [colSpan]="schedule?.dayDiff" *ngFor="let schedule of room.reservations">{{schedule?.firstName}}</td> <!-- changes -->
    </tr>
</tbody>

如果您将 ng-repeat (AngularJS) 修复为 Angular 2 (4) 语法，则在此特定示例中您不再需要 ? ，因为 Angular 不会在 data 尚不可用时尝试呈现 {{ caterory?.name }}。

Angular 2 在渲染模板之前加载数据

Angular 2 load data before render template

promise

observable

angular2-template

angular2-services

angular