如何循环嵌套的 json 并将数据显示到其中。在角度 8答案

【问题标题】：how to loop nested json and display data into it. in angular 8如何循环嵌套的 json 并将数据显示到其中。在角度 8
【发布时间】：2020-04-06 14:46:25
【问题描述】：

下面是我从 api 获取的嵌套 json。

【问题讨论】：

为什么，当然是*ngFor
bt 我不知道如何迭代 json 数据并在 html 中显示..
...与 *ngFor。这就是它的工作。我什至给了你文档的链接。

标签： javascript json angular

【解决方案1】：

在下面试试这个：在这里，我认为您的策略单元数组中只有对象，因此使用了 policy_units[0]。

 <div class="bx--col-lg-3 bx--col-md-3 text-div">
        <div class="text" *ngFor="let providers of Details['policy_units'][0]['providers'];">{{ providers }} </div>
    </div>

    <div class="bx--col-lg-3 bx--col-md-3 text-div">
        <div *ngFor="let edit_authorised_role of Details['policy_units'][0]['schema']['edit_authorised_roles'];">
        <div class="text">{{ edit_authorised_role }}</div>
        </div>
    </div>

    <div class="bx--col-lg-3 bx--col-md-3 text-div">
        <div *ngFor="let delete_authorised_role of Details['policy_units'][0]['schema']['delete_authorised_roles'];">
        <div class="text">{{ delete_authorised_role }}</div>
        </div>
    </div>

   <div class="bx--col-lg-3 bx--col-md-3 text-div">
    <div class="text">Details['policy_units'][0]['schema']['provider_push']</div>
</div>"

或

如果你想在你的 json 中迭代策略单元数组，你可以在下面这样做：

<div *ngFor="let policy_unit of Details['policy_units']>

<div class="bx--col-lg-3 bx--col-md-3 text-div">
        <div class="text" *ngFor="let providers of policy_unit['providers'];">{{ providers }} </div>
    </div>

    <div class="bx--col-lg-3 bx--col-md-3 text-div">
        <div *ngFor="let edit_authorised_role of policy_unit['schema']['edit_authorised_roles'];">
        <div class="text">{{ edit_authorised_role }}</div>
        </div>
    </div>

    <div class="bx--col-lg-3 bx--col-md-3 text-div">
        <div *ngFor="let delete_authorised_role of policy_unit['schema']['delete_authorised_roles'];">
        <div class="text">{{ delete_authorised_role }}</div>
        </div>
    </div>

   <div class="bx--col-lg-3 bx--col-md-3 text-div">
    <div class="text">policy_units['schema']['provider_push']</div>
</div>"
</div>

【讨论】：

如果没有数据 {{ edit_authorised_role }} 那么如何在其中添加文本没有数据......我的意思是这里的条件
只用一个ngIF条件，如果edit_authorised_role的长度为0，静态打印'no data'
bt 我在控制台中遇到错误，让详细信息的提供者['policy_units'][0]['providers'];细节未定义