我在使用* ngFor在html端进行循环时出现了一些问题,从下面的REST服务收到的数据就是我正在做的事情:
getQuestionaire(type: String) {
const url = `${this.questionaireTypeUrl}/${type}`;
return this.http.get(url).map(
(response: Response) => {const questioniares: any[] = response.json();
return questioniares;
}
);
}
这里我在app.component.ts之一中调用该函数:
ngOnInit() {
this.route.params
.subscribe(
(params: Params) => {
this.quesType = params['type'];
this.questionaireService.getQuestionaire(this.quesType).subscribe(
(questionaires: any[]) => {
this.questionaire = questionaires;
console.log(this.questionaire);
}
);
}
);
}
这里我在html端使用* ngFor循环并动态创建表
<table class="table ">
<thead>
<tr>
<th class="active">QUESTIONAIRE NAME</th>
<th class="active">LEVEL</th>
<th class="active">LAST MODIFIED</th>
<th class="active">PUBLISHED BY</th>
<th class="active">VALIDITY DATE</th>
</tr>
</thead>
<tbody *ngFor="let questionaireEl of questionaire">
<tr>
<td>{{ questioniareEl.nameQuestionaire }}</td>
<td>{{ questionaireEl.levelQuestionaire }}</td>
<td>{{ questionaireEl.lastUser }}</td>
<td>{{ questionaireEl.publishingUser }}</td>
</tr>
</tbody>
</table>
问题:控制台记录我循环的数据,它包含一个对象数组,我无法弄清楚如何访问我需要显示的元素请帮助!! < / p>
答案 0 :(得分:1)
您需要使用异步管道<tr *ngFor="let questionaireEl of questionaire | async">...
或者你可以写
<td>{{ questioniareEl?.nameQuestionaire }}</td>
<td>{{ questionaireEl?.levelQuestionaire }}</td>
...
避免错误
答案 1 :(得分:1)
这里?.
来救援
通常在异步调用发生时,您完全不知道何时会到达/到达模板。但另一方面,模板将被解析为HTML,并且它希望显示来自异步调用的尚未到达的数据。
因此,在数据返回之前,?.
运算符会等待(并且不会抛出任何模板错误)。
数据到达后,?.
运营商可以打印到达的数据。
例如
{{questioniareEl?.nameQuestionaire}}