Angular向User数组添加元素报错：类型无法用作索引类型

这个错误的核心原因是你错误地将User对象当作数组索引来使用，同时还有数组未初始化的问题，咱们一步步拆解：

具体问题点 #

• 数组未初始化：你只声明了users: User[];的类型，但没有给它初始值，此时this.users是undefined，根本无法进行元素添加操作。
• 错误的元素添加语法：this.users[ { ... } ]这种写法是把整个User对象当作数组的索引来使用，而数组的索引必须是数字类型，这就导致了TypeScript抛出"不能将对象用作索引类型"的错误。

修正后的代码示例 #

方式1：初始化数组后用push()添加元素 #

import { Component, OnInit } from '@angular/core';
import { User } from '../../models/User';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
  // 初始化空数组
  users: User[] = [];

  constructor() { }

  ngOnInit() {
    // 使用push()方法向数组添加单个用户对象
    this.users.push({ 
      firstName: "John", 
      lastName: "Doe", 
      age: 30, 
      address : { 
        street: "3rd Cross", 
        city: "Bangalore", 
        state: "Karnataka" 
      } 
    });
  }
}

方式2：直接赋值完整的用户数组 #

如果需要一次性添加多个用户，可以直接给users赋值一个数组：

ngOnInit() {
  this.users = [
    { 
      firstName: "John", 
      lastName: "Doe", 
      age: 30, 
      address : { 
        street: "3rd Cross", 
        city: "Bangalore", 
        state: "Karnataka" 
      } 
    },
    // 可以继续添加更多User对象
    {
      firstName: "Jane",
      lastName: "Smith",
      age: 28,
      address: {
        street: "5th Main",
        city: "Chennai",
        state: "Tamil Nadu"
      }
    }
  ];
}

补充说明 #

• 数组的索引访问语法array[index]只能用于数字索引（比如this.users[0]获取第一个元素），不能用对象当索引。
• 对于对象集合的键值对访问，你应该用Map或者普通对象（键为字符串/数字），但这里你要的是用户列表，数组是正确的选择。

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