Angular中如何从数组提取id字段？解决取值报错问题

嗨，我来帮你搞定这个问题～

问题出在哪？ #

你之所以会遇到"Property 'id' does not exist on type 'any[]'"这个报错，核心原因是：this.selectedCustomers是一个数组，而数组本身并没有id属性——id是数组里每一个对象元素的属性。你直接给整个数组加.id，相当于在问“这个数组的id是什么”，这显然不符合逻辑，所以TypeScript会抛出这个错误。

正确的解决方法 #

你需要遍历数组里的每一个对象，提取它们的id并组成新数组，这里用数组的map方法最适合：

// 提取所有id到新数组
const customerIds = this.selectedCustomers.map(customer => customer.id);
// 打印结果
console.log(JSON.stringify(customerIds));

运行这段代码后，控制台就会输出你想要的[1,2]啦。

再解释下map的作用 #

map是数组的内置方法，它会遍历数组中的每一个元素，对每个元素执行你传入的回调函数（这里就是取每个customer的id），然后把所有回调函数的返回值收集起来，形成一个全新的数组。完美匹配你“从对象数组中提取特定属性组成新数组”的需求。

完整示例 #

如果把你的场景完整写出来，大概是这样：

// 假设你的selectedCustomers初始值是这样
this.selectedCustomers = [{"id":1,"name":"John"},{"id":2,"name":"Jane"}];

// 提取id数组
const ids = this.selectedCustomers.map(item => item.id);

// 输出结果
console.log(JSON.stringify(ids)); // 控制台打印 "[1,2]"

内容的提问来源于stack exchange，提问作者Daire