Angular 7：“对象”类型上不存在属性“数据”

Question

I am using angular7 and following the step as the exact example here https://coursetro.com/posts/code/171/Angular-7-Tutorial---Learn-Angular-7-by-Example

But getting the error data doesn't. Here is the error below:

src/app/home/home.component.html:18:29 - error TS2339: Property 'data' does not exist on type 'Object'.

18     <li *ngFor="let user of users.data">
                               ~~~~~~~~~~

  src/app/home/home.component.ts:6:16
    6   templateUrl: './home.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HomeComponent.

I am trying to test the code and generate the service but i keep getting errors in home.component.html home.component.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)
    })
  }

}

home.component.html

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

data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http:HttpClient) { }
  getUsers() {
    return this.http.get('https://reqres.in/api/users');
  }

}

this is the exact code as the example..how can this be resolved?

Answer 1

Define type for the user object like below.

user: {
   data: any;
}

Then initialize user object with and empty array in HomeComponent.

Answer 2

try this

users: any;

or make sure User, Data Object

export class User {
 bla : string,
 data : Array<Data>
}

export class Data{
 blabla : string,
 blablabla : number
}

something like this

then

users : User = new User()

i hope it helps

Answer 3

This is a compilation issue, not a runtime issue. What this means is that there is likely an issue with your typesafety enforced by Typescript.

We can see that you've typesafed users as Object . However, data does not exist on the generic class Object . What you can do is just cast users differently.

users: {
  data: {
    first_name: string;
    last_name: string;
  }[];
}

So as you can see we're describing an object called users with a property data . data is an array of objects ( {}[] ) that contain a first_name and last_name property.