如何访问 Angular 中嵌套对象的属性？

Posted 2023-03-13

【中文标题】如何访问 Angular 中嵌套对象的属性？

【英文标题】：How can I access the properties of a nested object in Angular?

【发布时间】：2021-03-12 13:06:40

【问题描述】：

我有这个模型类。

export class Drivefunction
public Injection: Injection;
public df_uid_machine_injsiz:string;
public Motor_Cable_IEC: Motor_cable;
...

在我的 display.component.ts 中，我有这个函数填充了我的 Drivefunction[]

fillDrivefunctions()
  this.machineService.getDrivefunctions(this.injectionID)
    .subscribe((df:Drivefunction[])=> 
      this.drivefunctions = df;
      console.log(this.drivefunctions)
    );

如您所见，我尝试使用 console.log 来查看 json 对象是否正确填充

所有对象和嵌套对象都被填充了！

在我的 html 中，我的 drivefunction[] 有一个 ngFor 我可以访问字符串之类的属性，但如果我尝试访问嵌套对象，即使它已正确填充，也会得到“无法读取未定义的属性”。

我必须“额外”订阅这个嵌套对象吗？

我的 HTML：

<ion-list *ngFor="let drivefunction of this.drivefunctions; ">
    <ion-item> 
       <ion-label>drivefunction.Injection.inj_uid_machine_injsiz</ion-label>
    </ion-item>
</ion-list>

【问题讨论】：

将 HTML 添加到问题中

@RameshReddy 完成

drivefunction.Injection?.inj_uid_machine_injsiz 使用 ? 运算符。如果未填充 Injection，则不会尝试访问 inj_uid_machine_injsiz。您也不需要 html 中的 this。

@rhavelka 我知道，但是我的嵌套对象是未定义的，但是当您看到控制台输出时，它们不是

【参考方案1】：

我认为这是一个错字问题。

基于您提供的 HTML。

<ion-label>drivefunction.Injection.inj_uid_machine_injsiz</ion-label>

在控制台截图中，我们可以看到Injection是小写的。试试

<ion-label>drivefunction.injection.inj_uid_machine_injsiz</ion-label>

并相应地更改Drivefunction 类：

export class Drivefunction 
   public injection: Injection;
...

【讨论】：

是的，没错。我没看到。为你 +1

@futuremanuel 我已在答案中添加了详细信息。

【参考方案2】：

确保将您的drivefunction 属性声明为array。它看起来像下面的代码：

public drivefunction: Array<Drivefunction> = new Array();

所以现在，您将得到结果。我希望如此。

【讨论】：

不声明变量不会导致“无法读取未定义的属性”错误

我认为它会，如果你不使用 *ngIf 条件并且你使用循环。当数据仍在等待响应时，您可以循环使用未定义的属性值。

它没有，如果数组是[]、null 或undefined，那么没有什么可以循环，所以 *ngFor 不会尝试访问任何子对象。你可以在这个stackblitz玩玩

感谢您的解释。