Angular 使用索引名称从 json 中检索数据答案

【问题标题】：Angular retrieve data from json using index nameAngular 使用索引名称从 json 中检索数据
【发布时间】：2021-09-16 17:34:44
【问题描述】：

我正在尝试从 json 数组 DealerLst 访问用户项目的视图。我在从下面的复杂 json 访问多个用户时遇到问题。谁能帮助我如何使用角度或通过打字稿访问所有孩子？还有怎么知道哪个孩子属于哪个父母。

我的代码： Click to view my json output result

打字稿代码

 this.http.get<any>(environment.baseurl,{ headers }).subscribe({
      next: data => {
        console.log(data)
        this.dealers = data.dealerLst
        console.log(data.dealerLst.user)
        this.total=data.total
        
    },
    error: error => {
        console.error('There was an error!', error.message);
    }
    });

结果显示未定义。我也尝试放入 ngFor 循环，但没有成功。

【问题讨论】：

在哪里显示未定义？结果应该是什么？
data.dealerLst 是一个数组，您需要以某种方式遍历数组以从每个数组项中获取 user 属性。我不知道你在用这些数据做什么，所以我无法从这个判断你的问题是什么
你能把你的html代码复制到这里吗？
我的主要目的是在html页面中同时显示dealerLst和user。由于每个user在每个dealerLst下，我只能在html中显示dealerLst，我无法检索到哪个user属于哪个dealerLst。

标签： javascript arrays json angular typescript

【解决方案1】：

你的 html 看起来像这样？

<div *ngFor="let dealer of dealers"> Dealer Id: {{dealer?.id}} user: {{dealer?.user?.loginName}}</div>

在你的 ts 文件中：

this.http.get<any>(environment.baseurl,{ headers }).subscribe({
      next: data: <YOUR_INTERFACE> => {
        console.log(data)
        this.dealers = data.dealerLst
        console.log(data.dealerLst.user)
        this.total=data.total
        
    },
    error: error => {
        console.error('There was an error!', error.message);
    }
    });

【讨论】：

我正在寻找的确切答案。谢谢。
@AungPyae - 我很高兴，我能够提供帮助。我想建议您是否可以在 ts 文件中为您的数据定义接口，请使用您给定的代码查看我编辑的答案。