类型“字符串”上不存在属性“名称”

问题描述

我有一个对象列表，我需要遍历该列表并将对象中的某个属性（字符串）添加到的映射中。这是我的代码：

this.selectedPeople.forEach(element => {
  this.checkedPeople.set(element.name,true);
}

这样做的目的是在 Angular 中使用 [checked] 为某些人（如果他们在 selectedPeople 列表中）设置复选框。出于某种原因，我在尝试构建项目时收到此错误：

Property 'name' does not exist on type 'string'

我尝试将 element.name 更改为仅 element 并且在编译期间提供错误但是当我查看前端时，没有选中任何复选框（正如您所期望的那样，因为地图中的键不是所需的字符串）。我对其他列表做了类似的事情，它们似乎工作正常，那么为什么这里会出现这个问题？

Edit1：我在这里看到了一些其他解决方案，但它们似乎与我的案例无关或不起作用。

Edit2：这不是实际代码，因为它是公司代码，所以我尝试使用不同的场景重新创建问题，以免遇到任何保密问题。进一步详细说明， selectedPeople 数组将是这样的：

[
  {
    "name":"Paul","age":24,"sport":"Football"
  },{
    "name":"Tom","age":22,"sport":"Tennis"
  }
]

Edit3：为了进一步说明，我的 checkedPeople 地图如下所示：

0: {"Paul" => false}
1: {"Jennifer" => false}
2: {"Georgia" => false}
3: {"Tom" => false}

我正在尝试将 selectedPeople 数组中的每个人的值更改为 true。

解决方法

在没有看到您的项目设置的情况下，我打赌打字稿认为 element 可以是一个字符串或一个对象......像这样：

type SelectedPeople = Array<string | { name: string }>

在这种情况下，您需要在访问 name 属性之前确保该项目不是字符串：

this.selectedPeople.foreach(element => {
  if(typeof element === 'string') {
     this.checkedPeople.set(element,true);
  } else {
    this.checkedPeople.set(element.name,true);
  }
}

是的，您可以尝试上面 Ryan 的建议，或者您可以在设置每个元素之前添加安全检查，如下所示：

this.selectedPeople.forEach(element => {

If (element && element.Name){
  this.checkedPeople.set(element.name,true);
 }
}

我尝试使用 element['name'] 而不是 element.name，这似乎奏效了。我不太明白为什么会这样（特别是考虑到 element.name 在其他地方使用并且工作正常）所以如果有人有任何想法，请随时发表评论。

angular foreach html list typescript typescript