如何在Angular的TypeScript组件中初始化嵌套接口？

我是TypeScript和最新版Angular的新手，遇到问题需要帮助。我定义了两个嵌套接口，外部接口包含一个嵌套接口的数组：

export interface ModelOuter {
  modelInners?: ModelInner[];
  errorMessage : string;
}

export interface ModelInner {
 prop1: string;
}

我在组件中调用服务的代码如下：

export MyComponent implements OnInit {

modelOuter : ModelOuter | undefined; //我需要这里的帮助
modelInner: ModelInner[] |undefined; //我真的需要这个吗？如果需要，该如何初始化？

//其他ngOnInit代码块在此处，且在ngOnInit中调用以下代码
this.myService.getModels()
.subscribe((data: ModelOuter)=> {
       this.modelOuter : data;

       if (data.modelInner.length > 0) {
         this.modelInner = data.modelInner;
         modelOuter.modelInner = this.modelInner;
       }
}

无论怎么尝试，模板HTML始终出现modelInner未定义的错误。我的问题是：

1. 如何在组件中用一行代码初始化外部接口和嵌套接口？
2. 如何在服务的subscribe块中正确赋值这两个对象，避免模板出现未定义错误？

1. 无需单独维护modelInner变量 #

你完全不需要在组件里单独声明modelInner，它已经作为modelOuter的属性存在。单独维护会增加冗余，还容易导致数据不一致，这也是当前报错的原因之一。

2. 一行代码完成初始化 #

直接在声明modelOuter时赋予初始值，同时初始化嵌套数组：

modelOuter: ModelOuter = { errorMessage: '', modelInners: [] };

这样既完成了外部接口的初始化，也把嵌套数组设为空数组，从根源避免未定义问题。

3. 修正subscribe中的赋值逻辑 #

你的代码存在语法错误和逻辑问题，修正后如下：

this.myService.getModels()
.subscribe((data: ModelOuter)=> {
       // 修正赋值语法：用=而非:
       this.modelOuter = data;

       // 用可选链?.判断modelInners是否存在，再检查长度
       if (this.modelOuter.modelInners?.length > 0) {
         // 无需单独赋值modelInner，直接通过modelOuter访问即可
         console.log(this.modelOuter.modelInners);
       }
});

• 注意赋值运算符是=，你之前写的this.modelOuter : data是语法错误。
• 使用可选链?.可以避免访问undefined属性时触发报错。

4. 模板中规避未定义错误 #

在模板里访问属性时，用可选链或空值合并操作符处理：

<!-- 方式1：使用可选链 -->
<div *ngFor="let inner of modelOuter?.modelInners">
  {{ inner.prop1 }}
</div>

<!-- 方式2：空值合并给默认空数组 -->
<div *ngFor="let inner of modelOuter?.modelInners ?? []">
  {{ inner.prop1 }}
</div>

这样即使modelInners为undefined，模板也不会报错，而是渲染空内容。

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