在Angular中通过Promise异步返回的对象数据中进行迭代

Question

我收到一个Question对象数组，看起来像这样：数组的图片它由一组问题类别组成，其中包含一组问题。我用board: JeopardyBoard = new JeopardyBoard();初始化对象，然后通过运行将其填充到组件的init中

getGame(showNumber: number, round: string): Promise<JeopardyBoard> {
var url = this.gamesUrl
return this.http.get(url)
.toPromise()
.then(response => response as JeopardyBoard)
.catch(this.handleError);
}

我们在组件中调用此函数，通过运行来设置板变量

this.gameService.getGame(this.showNumberField, this.roundField).then(boardV => {this.board = boardV; console.log(this.board)});

我现在尝试通过运行来解析html中的这些数据

<div class="board" *ngIf="!currentQuestion">
<ul class="categories">
<li *ngFor="let category of board.categories"><span class="category-name" [innerHTML]="category.title"></span>
<ul class="category">
<li *ngFor="let question of category.clues" (click)="setCurrentQuestion(question)"><span class="question-value" [innerHTML]="question.value"></span></li>
</ul>
</li>
</ul>
</div>

但是在ngFor循环内部没有任何迭代。我试过这个和这个，但还没有让它工作

编辑：链接到代码

Answer 1

数据已从服务器检索到。您现在只需要更新UI即可。

constructor(
private gameService: GameService,
private cd: ChangeDetectorRef
) {}

内部getBoard方法

this.gameService
.getGame(this.showNumberField, this.roundField)
.then(boardV => {
this.board = boardV;
// Update UI
this.cd.detectChanges();
console.log(this.board);
});