Angular待办应用：如何避免添加重复名称的待办项

嘿，这个需求很实用！要避免添加同名待办项，我们可以利用数组的some()方法快速检测是否存在重复的label，下面是具体的修改方案：

核心思路 #

在addTodo方法中，新增一步重复检测逻辑：

1. 先对输入的任务名称做前后空格去除，避免因空格导致的“伪重复”（比如"Task"和" Task "其实是同一个任务）
2. 使用Array.some()遍历现有待办数组，只要找到一个label匹配的项，就判定为重复

修改后的addTodo方法 #

addTodo(newTodoLabel) { 
  // 先去除输入内容的前后空格，优化检测准确性
  const trimmedLabel = newTodoLabel.trim(); 

  if(trimmedLabel === '') { 
    this.errorMessage = "Task description can't be empty"; 
  } else {
    // 检测数组中是否已存在相同label的待办项
    const isDuplicate = this.todos.some(todo => todo.label.trim() === trimmedLabel);

    if (isDuplicate) {
      // 存在重复时提示错误
      this.errorMessage = "This task already exists!";
      this.infoMessage = "";
    } else {
      // 无重复则添加新任务
      this.todos.unshift({ label: trimmedLabel }); 
      this.errorMessage = ''; 
      this.infoMessage = ""; 
    }
  } 
}

可选优化：忽略大小写检测 #

如果你希望忽略任务名称的大小写（比如"Buy Milk"和"buy milk"视为重复），可以把检测逻辑改成：

const isDuplicate = this.todos.some(todo => 
  todo.label.trim().toLowerCase() === trimmedLabel.toLowerCase()
);

这样就能完美避免添加重复的待办任务啦！

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