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

Question

So i need to remove the value that i added at the text input area as a chip, but i dont know how to solve the codes to link the it together and remove it. So what should happen is when the proper codes are linked together, it should be able to be removed when i click the "x" on the chip.

i'm able to add the values, but when i click remove the values are still there.

          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

Array method indexOf() is case sensitive. The object which passed to fruits array does not return the index.

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

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

Answer 2

You can use Array.filter() to filter the elements in array

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

This will return new array removing the current fruit.