Object类型的属性数据用ngFor是不可读的



angalr不识别属性数据(来自API的虚拟数据),我得到以下错误:类型'Object'上不存在属性'data'

我尝试删除data属性,只使用"let user of users"但是它在的上给了我以下错误:类型'Object'不能赋值给类型'NgIterable | null | undefined'

my HTML component

<h1>Home</h1>

<ul *ngIf="users">
<li value="user" *ngFor="let user of users.data"> 
<img [src]="user.avatar">
<p>{{ user.first_name }} {{ user.last_name }}</p>
</li>
</ul>

ts组件:

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
users: Object;
constructor(private data: DataService) { 
}
ngOnInit() {
this.data.getUsers().subscribe(data => {
this.users = data
console.log(this.users)
})
}
}

Dataservice组件:

import { Injectable } from '@angular/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class DataService {
constructor(public http: HttpClient) { }
getUsers() {
return this.http.get('https://reqres.in/api/users')
}
}

只需在ts组件中进行以下更改即可成功编译

users: any;

创建接口作为示例响应。

相关内容