HttpClient：如何在DOM上顯示資料

這是我的模擬中的員工串列db.json。我試圖在DOM. 在app.component.htmlif I write in the loop 中{{employee}}，它可視化了一個包含 2 個專案的串列，每個專案都是[object Object]. 否則，如果我寫{{employee.name}}錯誤是： Property 'name' does not exist on type 'EmployeeService'.ngtsc(2339)

我錯過了什么？任何幫助將不勝感激。謝謝。

app.component.html：

{{title}}

<li *ngFor="let employee of employees">{{employee.name}}</li> //error with property name

app.component.ts

import { Component } from '@angular/core';
import { EmployeeService } from './service/employee.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'List of employees';

employees: EmployeeService[]=[];

constructor(private employeeService: EmployeeService) {}

ngOnInit(): void {
this.employeeService.getUsers().subscribe(emp => {
this.employees = emp;
  }) 
}
}

employee.service.ts

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

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

  constructor(private http: HttpClient) { }

  getUsers(): Observable<EmployeeService[]> {
    return this.http.get<EmployeeService[]>('http://localhost:3000/employees')
  }

}

db.json：

{
  "employees": [
    {
      "id": 1,
      "name": "Tim",
      "hired": true
    },
    {
      "id": 2,
      "name": "Jess",
      "hired": true
    }
  ]
}

uj5u.com熱心網友回復：

你總是可以看到使用 json 管道運算子加載到模板檔案的資料，

例如 <div>{{employees | json }}</div>，這將幫助您了解資料的結構并正確訪問它。

解決您的問題：

您的回應getUsers()回傳一個物件，其中包含一個員工陣列。您正在嘗試訪問資料物件。

相反，您應該employees從物件中檢索資料并遍歷employees模板檔案中的資料。

在您的app.component.ts組件中：

import { Component } from '@angular/core';
import { EmployeeService } from './service/employee.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'List of employees';

employees: any[]=[]; // preferably a custom type/interface than 'any'

constructor(private employeeService: EmployeeService) {}

ngOnInit(): void {
this.employeeService.getUsers().subscribe(emp => {
this.employees = emp.employees;  // ------------------> Change
  }) 
}
}

在您的app.component.html模板中：

<div *ngFor="let employee of employees">{{ employee.name }}</div>

為您employee.service.ts服務

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

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

  constructor(private http: HttpClient) { }

  // Your custom interface/type should be the return type 
  getUsers(): Observable<any[]> {
    return this.http.get('http://localhost:3000/employees');
  }

}

Stackblitz 中的作業應用

uj5u.com熱心網友回復：

// check whether the employee list is not empty before rendering it in UI
<ul *ngIf="employees">
  <li *ngFor="let employee of employees">{{ employee.name }}</li>
</ul>


// To view complete JSON dump in web page follow below: Add this import statement to your app module

import { CommonModule } from '@angular/common';

then include it in imports 

@NgModule({
  ...,
  imports: [CommonModule, ...],
})

<!-- in your app.html: -->

<div *ngIf ="employees">
   {{ employees | json}}
</div>

標籤：javascript 有角的

上一篇：ReactJS：將資料從json存盤到localStorage瀏覽器

下一篇："catch(console.error)"是捕獲Promise拒絕的有效方法嗎？