Angular结合HttpClient与Json Server实现删除按钮功能相关问题咨询

错误原因说明 #

你遇到的Property 'id' does not exist on type 'AppComponent'报错，是因为HTML模板中调用removeUser(id)时，id没有对应作用域变量：你在*ngFor循环中声明的变量是employee，需要从employee上取id属性传递。
另外你的代码还有两处路径拼写错误，需要同步修正。 #

具体修改点 #

1. 修正app.component.html传参 #

将按钮点击事件的入参改为当前循环项的employee.id，修改后代码：

{{title}}

<li *ngFor="let employee of employees">{{employee.name}} <button (click)="removeUser(employee.id)">Delete</button></li>

2. 修正employee.service.ts路径拼写 #

removeUser方法中的请求路径拼写错误（多写了一个r），且不需要外部传入完整url，仅接收id参数即可，修改后代码：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { EmployeeInterface } from '../types/employee.interface';

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

  constructor(private http: HttpClient) { }

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

  removeUser(id: number | string): Observable<{}> {
    // 修正拼写错误：employeers → employees
    return this.http.delete(`http://localhost:3000/employees/${id}`)
  }
}

3. 修正app.component.ts逻辑 #

• 点击打印id：直接在removeUser方法开头加console.log即可
• 本地列表更新逻辑：放在删除请求的成功回调中，保证后端删除成功后再同步前端数据
• 移除错误的url拼接逻辑，调用service方法时直接传id

修改后代码：

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

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

  constructor(private employeeService: EmployeeService) {}

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

  removeUser(id: number | string): void {
    // 疑问1：打印当前要删除的员工id
    console.log('待删除员工id：', id);
    this.employeeService.removeUser(id).subscribe({
      next: () => {
        // 疑问2：删除请求成功后更新本地员工列表
        this.employees = this.employees.filter(employ => employ.id !== id)
      },
      error: (err) => {
        console.error('删除失败：', err)
      }
    })
  }
}

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