如何在HTML及Angular ngFor中访问带空格的对象属性并遍历

嘿，我看到你在Angular里遍历带空格的对象属性时遇到了麻烦，咱们一步步拆解问题来搞定它！

首先，你写的Person对象存在语法错误，这是导致*ngFor无法生效的核心原因之一：

• JavaScript/TypeScript中，对象的键值对需要用**冒号:**而不是等号=来赋值
• 带空格的属性名必须用**引号（单引号或双引号）**包裹起来

所以正确的对象定义应该是这样的：

// 组件类中的代码
Person = { "first Name": ["ABC", "XYZ"] };

接下来，你用Person['first Name']的思路是对的，只要对象定义正确，这个写法是可以正常工作的。再给你一个完整的可运行示例：

组件类代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-person-demo',
  templateUrl: './person-demo.component.html'
})
export class PersonDemoComponent {
  // 修正后的对象
  Person = { "first Name": ["ABC", "XYZ"] };
}

模板HTML代码 #

<!-- 遍历带空格的属性 -->
<div *ngFor="let name of Person['first Name']">
  {{ name }}
</div>

额外的小建议 #

虽然通过方括号语法可以解决带空格属性的遍历问题，但我还是建议你尽量避免给对象属性起带空格的名字，推荐使用驼峰式命名（比如firstName），这样代码会更简洁易读：

// 更推荐的写法
Person = { firstName: ["ABC", "XYZ"] };

对应的模板可以直接写成：

<div *ngFor="let name of Person.firstName">
  {{ name }}
</div>

另外还要注意：Angular对变量名的大小写是敏感的，确保模板里使用的变量名和组件类里的完全一致，比如组件里是person（小写p），模板里就不能写成Person（大写P）哦！

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