Как получить массив с помощью динамического ключа c в * ngFor: Angular 2+

Question

Это мой объект:

dynamicData = 
    {
       uni_id:{options: [1,2,3,4]},
    }

Я хочу использовать ng для l oop вот так:

<option *ngFor="let opt of dynamicData.uni_id.options" value="{{opt.value}}">{{ opt.label }}</option>

Проблема в том, что uni_id Dynami c и доступен во время выполнения. Сам ключ uni_id является динамическим c. это может быть uni_id5, uni_id7, что угодно из базы данных. Как я могу использовать его в шаблоне

Answer 1

Вы можете использовать keyvalue pipe для динамического l oop через свойства объекта.

Попробуйте так:

  <ng-container *ngFor="let opt of dynamicData | keyvalue">
    <option  *ngFor=" let item of dynamicData[opt.key].options" value="{{item}}">{{item }}</option>
  </ng-container>

Рабочая демонстрация

Answer 2

Вы можете создать переменную, которая будет содержать имя ключа:

keyName ='uni_id';
dynamicData = {
    uni_id: { options: [1, 2, 3, 4] }
};

и использовать этот ключ в HTML шаблоне:

<select>
    <option  
       *ngFor=" let item of dynamicData[keyName].options" 
        value="{{item}}">
      {{item }}
    </option>
</select>

Это можно увидеть в примере с помощью stackblitz.

Answer 3

используйте это как

<option *ngFor="let opt of dynamicData.uni_id?.options" value="{{opt.value}}">{{ opt.label }}</option>

. Таким образом, вы можете проверить, есть ли данные в uni_id, тогда показывать

только если вы получаете значение Dynami c для uni_id затем

в файле ts

let uniqueId = Object.keys(this.dynamicData).filter(key => key.startsWith('uni_id'))[0]
list = this.dynamicData.uniqueId

в файле html

 <option *ngFor="let opt of list.options" value="{{opt.value}}">{{ opt.label }}</option>