Как отобразить значения на веб-странице с помощью angular7

Question

Я получил значения из API и могу показать их в журнале консоли.Но я не могу просматривать на веб-странице.Я не знаю, что я делаю там неправильно.Может кто-нибудь обновить меня, как реализовать и показать значения в 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

ERROR CONTEXT Object {view: {…}, nodeIndex: 3, nodeDef: {…}, ElDef: {…}, elView: {…}} HomeComponent.html: 4 (3) […] 0: Объект {имя: «karthik», фамилия: «selvam», id: 1} 1:Object {firstname: "ranjith", фамилия: "kumar", id: 2} 2: Object {firstname: "sathish", фамилия: "kumar", id: 3} длина: 3

Answer 1

Ваши данные ответа API не включают в себя упакованную в файл оболочку, поэтому удалите данные из html-шаблона home.component.html

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

в home.component.ts. Вы можете изменить тип свойства пользователя

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

constructor(private data: DataService) { }