html - 如何在Angular中用同一个词只创建一个芯片

Question

我想知道是否可以让我的输入从同一个单词中只创建一个芯片而不是创建重复。

现在用户似乎可以创建“apple”“APPLE”“appPPle”“aPpLe”，所以我想办法不这样做并且总是以小写“apple”返回，即使他们输入的内容都是大写或小写。

我只想为一个词创建一个芯片。任何帮助或建议将不胜感激。

我已经尝试了所有这些但仍然无法正常工作

1. this.value = $event.target.value.toUpperCase()
    this.ngModelChange.emit(this.value)

2. event.value=event.value.toLowerCase()

3. {{ value | lowercase }}

如果我能解决这个问题，用户可能可以多次创建“apple”“apple”，但稍后如果“apple”已经存在/创建，我将阻止用户输入相同的词。

这是与我的非常相似的项目

https://stackblitz.com/edit/angular-occkra

标签： htmlangularjsangulartypescriptangular-material

Answer 1

您需要将过滤逻辑添加到select和add方法：

if ((value || '').trim()) {
  if (this.allFruits.includes(value.toLowerCase()) && !this.fruits.includes(value.toLowerCase())) {
    this.fruits.push(value.trim().toLowerCase());
  }
}

没有include

if ((value || '').trim()) {
  if (this.allFruits.find((f) => f.toLowerCase() === value.toLowerCase()) && !this.fruits.find((f) => f.toLowerCase() === value.toLowerCase())) {
    this.fruits.push(value.trim().toLowerCase());
  }
}