Question

我正在学习Angular 4.我正在尝试显示对后端API的调用结果。我的数据很好。我想要显示它。这是组件：

import { Component, OnInit } from '@angular/core'; 
import { QuizService } from '../services/quiz.service';

@Component({ 
    selector: 'board', 
    templateUrl: './board.component.html', 
    styleUrls: ['./board.component.css']
})

export class Board {
    constructor(private service: QuizService) {}

    quizzes: any[]; 

    ngOnInit() {
        this.service.getQuizzes()
            .subscribe(res => {
                this.quizes = res.json(); 
                console.log(this.quizzes)
            }), error => {
                console.error(error)
            }
    }
}

以下是我尝试使用ngFor的地方：

<div className="board"> 
    <div className="board-container">
       <li *ngFor="let quiz of quizzes">
           {{ quiz.title }}
       </li>
    </div>
</div>

这引发了这个错误：

“Board.html：3 ERROR错误：无法找到'object'类型的不同支持对象'[object Object]'。NgFor仅支持绑定到诸如Arrays之类的Iterables。”

我正在关注一个教程并且之前做过类似的事情......无法弄清楚我在这里做错了什么。数据即将到来。

Answer 1

问题是需要：

this.quizzes = res.json（）。quizzes

调用不返回数组，它返回包含数组的对象。添加额外的.quizzes会让你进入数组并使错误消失。

Angular4 ngFor error - 无法找到'object'类型的不同支持对象'[object Object]'

1 个答案: