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);
}

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

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

2 个答案: