json - 如何为 Angular 6 中的下拉功能迭代多嵌套 JSON 对象？

Question

我在 Angular 6.0 中工作，遇到了使用 HttpClient 遍历我从 Assets 文件夹中的本地文件读取的 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 对象更改为数组？

为了它的值(value)，这是我在控制台中的 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>

堆栈 Blitz :https://stackblitz.com/edit/angular-ph76ya

我已经编辑了你的 JSON。