Как перебрать несколько вложенных объектов JSON для выпадающих функций в Angular 6?

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 onlyработает на массивах.Я пытался изменить объект на массив, но мой результат - только еще одна ошибка, в которой говорится, что ngFor может выполнять итерации только через объекты.Есть ли способ изменить весь мой вложенный объект JSON на Array?

Для чего это стоит, вот мои данные JSON в консоли Консоль 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>

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

Я отредактировал ваш JSON.