如何遍历 Angular 6 中的下拉功能的多嵌套 JSON 对象？

Question

我在 Angular 6.0 中工作，遇到了使用 HttpClient 迭代我从资产文件夹中的本地文件读取的 JSON 数据的问题。

这是我的 JSON 数据

[{
    "configKey": [{
        "user1": [{
            "subconfig": [{
                "name": "program Id",
                "type": "String"
            }, {
                "name": "brand ID",
                "type": "String"
            }]

        }],
        "user2": {
            "subconfig": [{
                "name": "program Id",
                "type": "String"
            }, {
                "name": "brand ID",
                "type": "String"
            }]
        },

        "user3": {
            "subconfig": [{
                "name": "program Id",
                "type": "String"
            }, {
                "name": "brand ID",
                "type": "String"
            }]
        }
    }]
}]

这是我当前在组件 ts 文件中的代码

  rule:Array<any> =[];

  loadinfo(){
    this.http.get<any[]>("assets/test.json")
    .subscribe(data=>{
      this.rule = data;
    })
  }

这是我在 HTML 文件中的内容

  <label>
    <select>
      <option *ngFor="let og of rule">
        {{og.configKey}}
      </option>
    </select>
  </label>

在我预期的最终目标中，我应该能够根据之前的选择填充下拉列表。 （例如，我选择 user1，该列表应在 JSON 的用户树中填充“名称”）。但是，我还没有进入这部分，只是想帮助我简单地使用我的 JSON 树中的名称填充下拉列表。

根据我之前的研究，我了解到 HttpClient 仅返回对象，而 *ngFor 仅适用于数组。我试图将对象更改为数组，但我的结果只是另一个错误，指出 ngFor 只能遍历对象。有没有办法将我的整个嵌套 JSON 对象更改为 Array？

对于它的价值，这是我在控制台中的 JSON 数据 Console JSON

我将如何通过 *ngFor 使我的数据可迭代，我将如何导航到名称？我会假设在 html 中它会是这样的？ ：

//TEST CODE????

  <label>
    <select>
      <option *ngFor="let og of rule">
        {{og.configKey.user1.subconfig.name}}
      </option>
    </select>
  </label>

任何形式的帮助将不胜感激！提前致谢

Answer 1

您可以通过keyvalue 管道迭代对象。 (https://angular.io/api/common/KeyValuePipe)

你可以这样做：

<div *ngFor="let config of res | keyvalue">
  <div>{{config.key}}</div>
  <div *ngFor="let users of config.value">
    <div *ngFor="let user of users | keyvalue">
      <div>{{user.key}}</div>
      <div *ngFor="let subcfgs of user.value | keyvalue">
        <div>{{subcfgs.key}}</div>
        <div *ngFor="let subcfg of subcfgs.value">
          <div>name: {{subcfg.name}}</div>
          <div>type: {{subcfg.type}}</div>
        </div>
      </div>
    </div>
  </div>
</div>

堆栈闪电战：https://stackblitz.com/edit/angular-ph76ya

我已经编辑了你的 JSON。