Angular中已定义canadianCities却提示未定义问题求助

问题根源是：你导入的canadianCities只是组件TS文件中的局部变量，Angular模板只能访问组件类的实例属性，无法直接读取外部导入的变量。以下是具体解决步骤：

• 在组件类中声明对应属性
  在PromoComponent类里添加一个与全局数组同名（或自定义名称）的属性，确保类型匹配：

  import { Component, OnInit } from '@angular/core';
  import { canadianCities } from 'src/app/globals';
  
  @Component({
    selector: 'app-promo',
    templateUrl: './promo.component.html',
    styleUrls: ['./promo.component.css']
  })
  export class PromoComponent implements OnInit {
    // 声明组件实例属性
    canadianCities = []; // 或者指定具体类型，比如string[]
  
    constructor() { }
  
    ngOnInit(): void {
      // 将导入的全局数组赋值给组件属性
      this.canadianCities = canadianCities;
      console.log(this.canadianCities); // 验证赋值成功
    }
  }
  

• 在模板中使用组件属性
  现在模板里的*ngFor可以直接引用这个组件实例属性：

  <div *ngFor="let city of canadianCities">
    {{ city }}
  </div>
  

• 可选优化：直接在属性声明时赋值
  也可以跳过ngOnInit，直接在属性声明时完成赋值，代码更简洁：

  export class PromoComponent implements OnInit {
    // 直接赋值，无需在ngOnInit中处理
    canadianCities = canadianCities;
  
    // ... 其余代码不变
  }
  

这样修改后，模板就能正确识别canadianCities属性，*ngFor可以正常遍历数组了。

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