如何从我的文本输入区域中删除“Fruit”值

Question

所以我需要删除我在文本输入区添加的值作为芯片，但我不知道如何解决代码将它链接在一起并删除它。 那么应该发生的是当正确的代码链接在一起时，当我点击芯片上的“x”时，它应该能够被移除。

我能够添加值，但是当我点击删除时，值仍然存在。

          add(event: MatChipInputEvent): void {
            const input = event.input;
            const value = event.value;
            console.log(`mat chip`, event);
            console.log(`mat chip value`, value);

            // Add our fruit
            if ((value || '').trim()) {

              this.fruits.push({name: value.trim()});
              console.log(`fruits`, this.fruits);
              let type = this.editDeliveryOrderForm.value.type;
              type += ',' + value.trim();
              this.editDeliveryOrderForm.patchValue({
                type
              });
            }

            // Reset the input value
            if (input) {
              input.value = '';
            }
          }

          remove(fruit: Fruit): void {
            const index = this.fruits.indexOf(fruit);
            const value = fruit.name;

            // console.log(`mat chip`, event);
            // console.log(`mat chip value`, value);

            if (index >= 0) {
              this.fruits.splice(index, 1);

              // this.fruits.push({name: value.trim()});
              // console.log(`fruits`, this.fruits);
              let type = this.editDeliveryOrderForm.value.type;
              value.trim();
              this.editDeliveryOrderForm.patchValue({
                type
              });
            }

Answer 1

数组方法indexOf（）区分大小写。 传递给fruits数组的对象不返回索引。

const index = this.fruits.indexOf(fruit);
//console.log(index);

if(index !== -1) {
// code..
}

Answer 2

您可以使用Array.filter（）过滤数组中的元素

remove(fruit: Fruit): void {
       this.fruits = this.fruits.filter((fr)=>fr.name !== fruit.name);
}

这将返回删除当前水果的新数组。