Angular使用HttpClient获取数据渲染到DOM时报属性不存在错误如何解决？

• 核心错误是混淆了服务类和员工数据模型的类型定义：你的employees数组、getUsers接口返回值都错误声明为EmployeeService[]类型，而EmployeeService是你的服务类本身，并没有name属性，自然触发类型校验报错。
• 你没有单独定义匹配db.json结构的员工数据类型，TS无法识别返回数据的字段。

步骤1：定义员工数据模型 #

新建src/app/models/employee.ts，写入如下代码：

export interface Employee {
  id: number;
  name: string;
  hired: boolean;
}

步骤2：修改employee.service.ts的类型声明 #

引入刚才定义的Employee接口，修改getUsers方法的返回值类型：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
// 引入员工模型
import { Employee } from '../models/employee';

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

  constructor(private http: HttpClient) { }
  // 把返回类型从EmployeeService[]改为Employee[]
  getUsers(): Observable<Employee[]> {
    return this.http.get<Employee[]>('http://localhost:3000/employees')
  }
}

步骤3：修改app.component.ts的数组类型 #

同样引入Employee接口，修改employees数组的类型声明：

import { Component } from '@angular/core';
import { EmployeeService } from './service/employee.service';
// 引入员工模型
import { Employee } from './models/employee';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'List of employees';
  // 把数组类型从EmployeeService[]改为Employee[]
  employees: Employee[]=[];

  constructor(private employeeService: EmployeeService) {}

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

修改完成后重新启动服务即可正常渲染employee.name字段。

内容的提问来源于stack exchange，提问作者lacertezzadellapena