Angular删除任务时报number类型无法赋值给string|undefined类型如何解决

报错原因 #

• 任务id本身是number类型：你在父组件addTaskList方法中给id赋值为this.list.length，天然是数字类型
• 子组件事件发射器类型不匹配：child.component.ts中removedTaskEvent定义的泛型是string，但实际触发时emit的是number类型的item.id
• 父组件接收参数类型不匹配：app.ts中removedTask方法定义的入参是string类型，和实际传入的number类型冲突
• 额外逻辑错误：你把removedTaskEvent事件监听绑到了Add按钮上，这个事件是子组件触发的，需要绑定到<app-child>标签才能正常接收事件

修复方案（推荐统一用number类型，符合id的实际使用场景） #

1. 修正子组件事件发射器类型
   修改child.component.ts代码：

// 把泛型从string改为number
@Output() removedTaskEvent = new EventEmitter<number>(); 

2. 修正父组件删除方法的入参类型
   修改app.ts中removedTask方法的参数定义：

// 把入参类型从string改为number
removedTask(id: number) {
  console.log(id);
  this.list = this.list.filter(item => item.id !== id)
}

3. 修正事件绑定位置
   修改app.component.html代码，把事件监听从button移到app-child标签：

<input #taskList type="text" placeholder="To Do List">
<button (click)='addTaskList(taskList.value); taskList.value = ""'>Add Task</button>

<ul *ngFor="let task of list">
    <!-- 把removedTaskEvent绑定移到这里 -->
    <app-child [item]="task" (removedTaskEvent)="removedTask($event)"></app-child>
</ul>

修改完成后类型报错会消失，删除功能可以正常运行。

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