尝试区分“[object Object]”时出错。只允许数组和可迭代对象,但我没有发现我的代码有任何问题
Error trying to diff '[object Object]'. Only arrays and iterables are allowed but i dont see anything wrong with my code
过去一周我一直遇到这个问题,我到处搜索但找不到问题。
我的服务
private texst!: Posts[];
public getPosts(): Observable<Posts[]>
{
return this.http.get<Posts[]>("http://localhost/projects/php_rest_api/api/post/read.php").pipe(map((data) => {
return this.texst = data;
}));
}
我的组件,我在这里添加服务和运行从我的数据库中获取数据的函数
public test: Posts[] = [];]
constructor(public postService: PostsService,
private http: HttpClient) {}
ngOnInit(): void {
this.getPosts();
}
public getPosts()
{
this.postService.getPosts().subscribe((response) => {
this.test = response;
console.log(this.test);
})
}
我的html
<div>
<button (click)="getPosts()"></button>
<div *ngFor="let test of test">
{{test.title}}
</div>
</div>
更改此设置,将您的变量 test
重命名为 testItem
,因为它已被使用:
<div>
<button (click)="getPosts()"></button>
<div *ngFor="let testItem of test">
{{testItem.title}}
</div>
</div>
这意味着您正在尝试遍历对象,但您认为它是一个数组。
如果该图像是 response
的日志,您最好这样做:
public getPosts()
{
this.postService.getPosts().subscribe((response) => {
this.test = response.data; // <.. this changes!
})
}
并在模板中:
<div *ngFor="let testItem of test">
{{testItem.title}}
</div>
设法修复它
在我的 getPosts() 函数中更改了对 object.values 的响应
public getPosts()
{
this.postService.getPosts().subscribe((response) => {
this.test = Object.values(response);
console.log(this.test);
})
}
过去一周我一直遇到这个问题,我到处搜索但找不到问题。
我的服务
private texst!: Posts[];
public getPosts(): Observable<Posts[]>
{
return this.http.get<Posts[]>("http://localhost/projects/php_rest_api/api/post/read.php").pipe(map((data) => {
return this.texst = data;
}));
}
我的组件,我在这里添加服务和运行从我的数据库中获取数据的函数
public test: Posts[] = [];]
constructor(public postService: PostsService,
private http: HttpClient) {}
ngOnInit(): void {
this.getPosts();
}
public getPosts()
{
this.postService.getPosts().subscribe((response) => {
this.test = response;
console.log(this.test);
})
}
我的html
<div>
<button (click)="getPosts()"></button>
<div *ngFor="let test of test">
{{test.title}}
</div>
</div>
更改此设置,将您的变量 test
重命名为 testItem
,因为它已被使用:
<div>
<button (click)="getPosts()"></button>
<div *ngFor="let testItem of test">
{{testItem.title}}
</div>
</div>
这意味着您正在尝试遍历对象,但您认为它是一个数组。
如果该图像是 response
的日志,您最好这样做:
public getPosts()
{
this.postService.getPosts().subscribe((response) => {
this.test = response.data; // <.. this changes!
})
}
并在模板中:
<div *ngFor="let testItem of test">
{{testItem.title}}
</div>
设法修复它
在我的 getPosts() 函数中更改了对 object.values 的响应
public getPosts()
{
this.postService.getPosts().subscribe((response) => {
this.test = Object.values(response);
console.log(this.test);
})
}