如何使用angular7在网页中显示值

Question

I got the values from the API and I can show in Console log. But I can't view on webpage. I don't know what I do wrong thing there. Can anyone update me how to implement and show the values to 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);
  }
);
}
 firstclick(){
  console.log('clicked button')
}

}

home.component.html

  <li *ngFor="let user of users.data">
    <p>
      {{ user.firstname }} 
    </p>
  </li>

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('http://localhost:3000/api/crs')
 }
}

console.log output

ERROR CONTEXT Object { view: {…}, nodeIndex: 3, nodeDef: {…}, elDef: {…}, elView: {…} } HomeComponent.html:4 (3) […] ​ 0: Object { firstname: "karthik", lastname: "selvam", id: 1 } ​ 1: Object { firstname: "ranjith", lastname: "kumar", id: 2 } ​ 2: Object { firstname: "sathish", lastname: "kumar", id: 3 } ​ length: 3

Answer 1

Your API response data do not include data filed wrapper so remove data from html template home.component.html

 <li *ngFor="let user of users">
    <p>
      {{ user.firstname }} 
    </p>
  </li>

in home.component.ts you can change type of users property

export class HomeComponent implements OnInit {
 users: any[];

constructor(private data: DataService) { }