Question

export class AppComponent implements OnInit {

  title = 'bucketList';
  bucketList: BucketListItem[] = [
    new BucketListItem(
      "Goa Trip",
      "Travel to Goa"
    )
  ];

  ngOnInit() {

  }
  onItemAdded(eventData) {
    this.bucketList.push(new BucketListItem(eventData.itemName, eventData.itemDescr));
  }
  onItemDeleted(delData) {   //delData = "Goa Trip"
    console.log(this.bucketList); //prints {"itemName":"Goa Trip","itemDescr":"Travel to Goa"
    this.bucketList = this.bucketList.filter(function (obj) {
      return obj.itemName !== delData;
    });
    console.log(this.bucketList);  //prints {"itemName":"Goa Trip","itemDescr":"Travel to Goa"
  }
}

我正在尝试根据 itemName 从数组中删除一个对象，其中 itemName === "Goa Trip" 。但它仍然没有删除元素。

Answer 1

过滤后需要赋值。

bucketList = bucketList.filter(function (obj) {
      return obj.itemName !== 'Goa Trip';
});
console.log(bucketList);

Answer 2

问题在于您如何设置 BucketListItem 对象。这是一个可重复的最低限度的例子：

class App {

    title = 'bucketList';
    bucketList = [
        {
            itemName: "Goa Trip",
            itemDescr: "Travel to Goa"
        }
    ];
    add(data) {
        this.bucketList.push([data.itemName, data.itemDescr]);
    }
    delete(delData) {   //delData = "Goa Trip"
        console.log(this.bucketList); //prints {"itemName":"Goa Trip","itemDescr":"Travel to Goa"
        this.bucketList = this.bucketList.filter(function (obj) {
            return obj.itemName !== delData;
        });
        console.log(this.bucketList);  //prints {"itemName":"Goa Trip","itemDescr":"Travel to Goa"
    }
}

然后你可以运行这些命令：

const app = new App()
app.delete('Goa Trip')

它的行为符合预期。在您的示例中，"itemName" 用双引号括起来，告诉我这些引号要么是属性字面名称的一部分，要么是 JSON 而不是 JavaScript 对象。

试试这个：

this.bucketList = this.bucketList.filter(function (obj) {
    return obj['"itemName"'] !== delData;
});

如果它有效，那么您将双引号作为项目字面名称的一部分。由于没有属性 itemName 而是 "itemName"，因此您的过滤器方法没有匹配任何内容。

Answer 3

我发现了错误，这是由于itemName中的试验和前导空格引起的。现在我使用了 javascript trim() 函数。现在运行良好。

删除对象数组中的项目：打字稿

3 个答案: