Angular 8 类型 'object' 的错误“[object Object]”。 NgFor 仅支持绑定到 Iterables,例如 Arrays
Angular 8 error '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays
我是 Angular 8 的新手,我正在使用以下结构从 http get 获取数据,我正在尝试使用 *ngFor 迭代数据。不幸的是,我收到以下错误。
如何修复错误?先感谢您
'[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
学生模型
export class Student {
Name: string;
Sport: string;
}
student.service.ts
public getData(path: string): Observable<Student[]> {
return this.http.get<Student[]>(this.mainUrl + path).pipe(
tap(_ => console.log('fetched data'))
);
}
student.component.ts
import { Observable, of } from 'rxjs';
import { Student } from 'src/app/models/student';
import { HttpService } from 'src/services/http.service';
import { StudentService } from './student.service';
@Component ({
selector: 'student',
templateUrl: 'student.component.html',
styleUrls: ['student.component.css']
})
export class StudentComponent implements OnInit {
students: Student[];
constructor(
private studentService: StudentService
) {
}
getStudents(): void {
let ppp = this.studentService.getData("get_students");
this.studentService.getData("get_students").subscribe(
students => { this.students = students }
// students => {console.log(this.students)}
);
console.log(this.students); // prints undefined
}
ngOnInit() {
this.getStudents();
}
}
student.component.html
<li *ngFor="let p of students">
<div>hello</div>
</li>
您的服务器响应是一个对象,您需要从中检索服务器响应数据
public getData(path: string): Observable<Student[]> {
return this.http.get<Student[]>(this.mainUrl + path).pipe(
map(({ student }) => student)
);
}
如果您的服务器发送实际数组,如果它仍然抱怨您需要将该响应转换为数组,那应该可以工作。
我是 Angular 8 的新手,我正在使用以下结构从 http get 获取数据,我正在尝试使用 *ngFor 迭代数据。不幸的是,我收到以下错误。
如何修复错误?先感谢您
'[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
学生模型
export class Student {
Name: string;
Sport: string;
}
student.service.ts
public getData(path: string): Observable<Student[]> {
return this.http.get<Student[]>(this.mainUrl + path).pipe(
tap(_ => console.log('fetched data'))
);
}
student.component.ts
import { Observable, of } from 'rxjs';
import { Student } from 'src/app/models/student';
import { HttpService } from 'src/services/http.service';
import { StudentService } from './student.service';
@Component ({
selector: 'student',
templateUrl: 'student.component.html',
styleUrls: ['student.component.css']
})
export class StudentComponent implements OnInit {
students: Student[];
constructor(
private studentService: StudentService
) {
}
getStudents(): void {
let ppp = this.studentService.getData("get_students");
this.studentService.getData("get_students").subscribe(
students => { this.students = students }
// students => {console.log(this.students)}
);
console.log(this.students); // prints undefined
}
ngOnInit() {
this.getStudents();
}
}
student.component.html
<li *ngFor="let p of students">
<div>hello</div>
</li>
您的服务器响应是一个对象,您需要从中检索服务器响应数据
public getData(path: string): Observable<Student[]> {
return this.http.get<Student[]>(this.mainUrl + path).pipe(
map(({ student }) => student)
);
}
如果您的服务器发送实际数组,如果它仍然抱怨您需要将该响应转换为数组,那应该可以工作。