Angular中无法访问对象属性及*ngFor报NG0901错误求助

问题核心：*ngFor仅支持遍历数组、Map这类可迭代对象，你在environment.ts里定义的featureToggle是普通对象，直接返回给组件用*ngFor遍历就会触发ERROR NG0901错误。

具体解决方案 #

修改服务的getAllFeatures方法，把对象转换成符合FeatureInterface的数组：

// 服务中的代码
getAllFeatures() {
  // 用Object.entries拆解对象键值对，再映射成目标数组
  return Object.entries(environment.featureToggle).map(([feature, isActive]) => ({
    feature,
    isActive
  })) as FeatureInterface[];
}

代码说明 #

• Object.entries(environment.featureToggle)会把对象转为[["feature1", true], ["feature2", false]]这样的键值对数组
• 用map遍历这个数组，把每个键值对转换成FeatureInterface类型的对象，最后断言类型确保类型匹配

组件与模板无需修改 #

组件里的赋值逻辑保持原样：

features: FeatureInterface[] = []; 

ngOnInit(): void {
  this.features = this.featureToggleService.getAllFeatures();
}

模板里的*ngFor就能正常遍历了：

<div *ngFor="let item of features">
  {{item.feature}} - {{item.isActive}}
</div>

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