角度2つの負荷データは、前に私は次のHTMLコードしているテンプレート

Question

をレンダリングテンプレートのレンダリング中にロードされたノードの数。これは私のコンポーネントコードです：まずデータをロードしてからテンプレートをレンダリングする方法は？

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）構文に変換する場合、dataがまだ利用できないときにAngularが{{ caterory?.name }}をレンダリングしようとしないため、この特定の例ではもう?は必要ありません。