我有以下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:无法读取未定义的属性“name”
我用谷歌搜索后导致数据在模板渲染时被点头加载。这是我的组件代码:如何先加载数据然后再渲染模板?
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));
});
}
答案 0 :(得分:3)
如果?.
之前的值为.
.
代替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不会尝试<{1}}尚未可用时呈现{{ caterory?.name }}
。