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

Question

I have a list of objects and I need to iterate over the list and add a certain property (string) from the object to a map of <string, boolean>. Here is my code:

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

The purpose of this is to set checkboxes to be checked for certain people (if they are in the selectedPeople list) using [checked] in Angular. For some reason, I get this error when trying to build the project:

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

I tried to change element.name to just element and that provides errors during compilation but when I look at the frontend, none of the checkboxes are checked (as you would expect since the key in the map is not a string as required). I have done similar things with other lists and they seem to be working fine, so why is this an issue here?

Edit1: I have seen some other solutions on here but they do not seem to be relevant to my case or have not worked.

Edit2: This is not the actual code as it is company code so I have tried to recreate the issue using a different scenario so as not to run into any confidentiality issues. To elaborate further, the selectedPeople array would be something like this:

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

Edit3: For further clarification, here is what my checkedPeople map looks like:

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

And I am trying to change the value to true for each person who is in the selectedPeople array.

Answer 1

Without seeing your project setup, I'm betting that typescript thinks that element can be a string or an object... something like this:

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

In such as case, you will need to make sure the item is not a string before accessing the name property:

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

Answer 2

Yes, you can either try what Ryan is suggesting above, or alternatively you can add a safe check before setting each element like so:

this.selectedPeople.forEach(element => {

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

Answer 3

I tried using element['name'] instead of element.name and that seemed to do the trick. I do not quite understand why this works (especially given that element.name is used elsewhere and works fine) so if anyone has any idea, feel free to comment.