如何将JSON变量传递给对象数组？Angular项目技术求助

我明白你的问题了——核心问题出在异步操作的执行顺序和组件属性初始化时机不匹配上，让我一步步给你拆解和解决：

问题根源 #

你在组件类初始化阶段直接给composals赋值[this.arrayObj]，但这个动作是在ngOnInit之前就完成的。而你的API请求getComposals()是异步的，subscribe里的回调要等后端返回数据才会执行，这时候arrayObj还没被赋值，初始值是undefined，所以composals一开始其实是[undefined]。哪怕之后arrayObj被API数据更新了，composals也不会自动同步，因为它的初始化只执行一次。

另外，用any类型定义arrayObj会丢失TypeScript的类型检查优势，建议先定义匹配返回结构的接口。

解决方案步骤 #

1. 定义匹配JSON结构的Composal接口
   把后端返回的字段对应成TypeScript接口，获得类型提示和检查：

   interface Composal {
     m_cColor: string;
     m_cType: string;
     m_cOptions: string[];
     m_cQuestion: string;
     m_cAnswer: string;
     m_eIdComposant: number;
   }
   

2. 调整组件代码，在异步回调中更新数组
   不要在类初始化时给composals赋值，等API返回数据后，在subscribe回调里把数据赋值给目标数组：

   import { Component, OnInit } from '@angular/core';
   import { ApiService } from './api.service'; // 确保导入你的API服务
   
   interface Composal {
     m_cColor: string;
     m_cType: string;
     m_cOptions: string[];
     m_cQuestion: string;
     m_cAnswer: string;
     m_eIdComposant: number;
   }
   
   export class AppComponent implements OnInit {
     title = "Form";
     arrayObj: Composal[] = []; // 初始化空数组并指定类型
     composals: Composal[] = []; // 同样初始化空数组
   
     constructor(private apiService: ApiService) {} // 记得注入API服务
   
     ngOnInit() {
       this.apiService.getComposals().subscribe((res) => {
         console.log(res.tpoCampos);
         // 把返回的tpoCampos赋值给arrayObj，同时同步到composals
         this.arrayObj = res.tpoCampos as Composal[]; // 类型断言确保类型匹配
         this.composals = [...this.arrayObj]; // 用扩展运算符创建新数组，触发变更检测（可选）
         // 或者直接简化为：this.composals = res.tpoCampos as Composal[];
       });
     }
   }
   

额外优化建议 #

• 如果你的ApiService已经定义了返回类型，可以不用as Composal[]的类型断言，直接让服务返回Observable<{ m_iPatientID: number; tpoCampos: Composal[] }>，类型会更安全。
• 如果你需要composals和arrayObj始终保持同步，可以考虑用RxJS的BehaviorSubject来管理数据，但简单场景下上面的写法就足够了。

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