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对象更改为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

您可以通过std::ostream &myPrint(std::ostream &os, std::vector<std::stack<int>> const &vs) { os << "vec:\n"; for (auto s : vs) { os << "\t(stack): "; while(!s.empty()){ os << s.top() << ' '; s.pop();} os << '\n'; } return os; }管道来迭代对象。（https://angular.io/api/common/KeyValuePipe）

您可以这样做：

keyvalue

stackblitz：https://stackblitz.com/edit/angular-ph76ya

我已经编辑了您的JSON。

如何在Angular 6中遍历用于嵌套功能的多嵌套JSON对象？

1 个答案: