ngFor 无法读取 Object 类型的属性数据

Question

Angualr does not recognise the property data (dummy data from an API), i get the following error: Property 'data' does not exist on type 'Object'

I tried removing the data property and just use "let user of users" but it gives me the following error on of : Type 'Object' is not assignable to type '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>

the ts component :

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)
    })
  }
}

the Dataservice ts component:

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')
  }
}

Answer 1

Just make the following changes in your ts component to compile successfully

users : any ;

Or

create the interface as the sample response.