角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

我GOOGLE了原因之后是数据当模板呈现时点着加载。这是我的组件代码：如何先加载数据然后再渲染模板？

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> 

如果你修好了（AngularJS）转换为Angular 2（4）语法，因此在此特定示例中不再需要?，因为当data尚不可用时，Angular将不会尝试渲染{{ caterory?.name }}。