为何Angular export类中无法直接按索引为类属性数组赋值？

这个报错和Angular框架无关，也不是变量被static、final修饰导致不可修改，完全是TypeScript（基于ES6类规范）的语法规则限制：

• 类的定义块（export class Xxx { // 这里是类定义块 }）的根层级，仅允许写类字段声明、构造函数、类方法、get/set存取器、静态成员声明这几类结构
• 你写的landen[0] = {id: 1, name:"Belgium"}属于可执行的赋值语句，这类语句不能直接裸放在类定义块的根位置，必须包裹在构造函数、类方法的内部才能执行
• 你贴的错误示例里还存在重复声明同名类属性landen: Land[]的问题，同一个类中同名属性仅能声明一次，重复声明本身也会触发编译报错。

你觉得变量表现出类似不可修改的特性，本质是这几行代码从语法层面就不符合规范，在编译阶段就被拦截，根本没有进入运行时赋值的环节。

写法1：声明属性时直接初始化（你已经验证可用） #

这是最简洁的写法，符合类字段初始化的语法规则：

landen: Land[] = [
  {id: 1, name:"Belgium"},
  {id: 2, name: "Holland"}
];

写法2：赋值逻辑放到构造函数中 #

类实例化时会自动执行构造函数内的代码，适合需要分步初始化属性的场景：

export class AppComponent {
  landen: Land[] = [];

  constructor() {
    this.landen[0] = {id: 1, name:"Belgium"};
    this.landen[1] = {id: 2, name: "Holland"};
  }

  // 其余组件逻辑
}

写法3：赋值逻辑放到Angular组件生命周期钩子中 #

更符合Angular开发规范的写法是把初始化逻辑放到ngOnInit钩子中，组件初始化时会自动执行该方法：

import { Component, OnInit } from '@angular/core';
import { Land } from './model/land';

@Component({
  selector: 'app-root',
  template:`<h1>{{title}}</h1>
              <h2>Details van {{land.name}}</h2>
              <div><label>id: </label>{{land.id}}</div>
              <div>
                <label>naam: </label>
                <input [(ngModel)]="land.name" placeholder="name">
              </div>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  landen: Land[] = [];

  ngOnInit(): void {
    this.landen[0] = {id: 1, name:"Belgium"};
    this.landen[1] = {id: 2, name: "Holland"};
  }

  // 其余组件逻辑
}

注：你提到的land = counrty、landen = countries命名差异，确实和该问题没有关联。

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