Angular新手如何将输入框值存入数组并通过HTML列表展示及报错解决

错误原因 #

这个报错是TypeScript默认类型推断导致的：你声明todoArray = []时没有指定类型，TS会自动将空数组推断为never[]类型，这类数组只允许存放不可能存在的值，所以无法存入字符串类型的输入内容。

核心修复方案 #

修改app.component.ts中todoArray的声明，显式指定数组类型为字符串数组即可：

// 修改前
todoArray = [];
// 修改后
todoArray: string[] = [];

其他附带问题修复 #

你现有代码还有几处逻辑问题，会导致功能无法正常运行，可同步修改：

1. 模板遍历渲染错误：*ngFor遍历得到的每一项变量名为item，你当前模板写的{{todo}}和deleteItem(todo)会导致所有列表项内容相同、删除功能失效，修改列表项代码为：

<li [@moveInLeft]  *ngFor="let item of todoArray">{{item}} <i (click)="deleteItem(item)" class="material-icons">delete</i></li>

2. 删除方法数组越界问题：deleteItem中的循环条件i<= this.todoArray.length会访问到数组不存在的下标，修改循环条件，匹配到目标项后直接跳出循环提升性能：

deleteItem(todo: string){
  for(let i=0 ;i < this.todoArray.length ;i++){
    if(todo == this.todoArray[i]){
      this.todoArray.splice(i,1)
      break
    }
  }
}

3. 表单提交逻辑错误：todoForm.value是包含表单字段的对象，不是字符串，且提交后需要调用addTodo方法把内容存入数组，修改提交方法为：

todoSubmit(value:any){
  if(value.todo?.trim() !==""){
    this.addTodo(value.todo)
  }else{
    alert('Field required **')
  }
}

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