Цикл через JSON "Словарь", возвращаемый из API (Typescript)

Question

Я обращаюсь к внешнему API, который возвращает строку JSON, я пытаюсь получить данные из нее и поместить в массив any.Однако всякий раз, когда я делаю вызов, я получаю один объект со всеми элементами в качестве свойств.

Я пытаюсь получить все это в <select>, используя NgOptions

У меня естьискал, чтобы попытаться найти ответ, и попытался выдвинуть временный массив

Что у меня есть для метода вызова

    getCurrencies() {

        this.currService.getCurrencies(this.properties.APIKEY).subscribe((res: Response) =>
            this.currencies$ = res['results'],
            err => {
                console.log(err);
            }
        );

        console.log(this.currencies$);
    }

образец того, что возвращается

       {"ALL": { "currencyName": "Albanian Lek", "currencySymbol": "Lek", "id": "ALL" },
        "XCD": { "currencyName": "East Caribbean Dollar", "currencySymbol": "$", "id": "XCD" },
        "EUR": { "currencyName": "Euro", "currencySymbol": "€", "id": "EUR" },
        "BBD": { "currencyName": "Barbadian Dollar", "currencySymbol": "$", "id": "BBD" },
        "BTN": { "currencyName": "Bhutanese Ngultrum", "id": "BTN" }}

HTML для <select>

         <select name='destination' class="form-control" id="CurrFrom" [(ngModel)]="destination"
                ng-options="item.id as item.currencyname for item in currencies$"></select>

Answer 1

ng-options является директивой AngularJS.Вместо этого используйте ngFor в обычном элементе option вместе с KeyValuePipe , поскольку ваши данные являются объектом.По соглашению $ используется для наблюдаемых.Для вас currencies$ - это данные, которые подписаны на ваш Observable, поэтому вы можете просто переименовать его в currencies.

Вот как будет выглядеть ваш шаблон.

<select name='destination' class="form-control" id="CurrFrom" [(ngModel)]="destination">
    <option *ngFor="let currency of currencies | keyvalue" [value]="currency.value.id">{{currency.value.currencyName}}</option>
</select>

Вот рабочий пример для StackBlitz .

Answer 2

    <select name='destination' class="form-control" id="CurrFrom" [(ngModel)]="destination">
    <option *ngFor="for item in currencies$" [value]="item.id">{{item.currencyName}}</option>
</select>

Вы можете сделать что-то подобное и включить объект в цикле в опциях, обернутых вокруг select, следовательно, динамически заполняющих опций.

Answer 3

выберите элемент управления

       <select id="test2" name="test2" formControlName="test2"
 class="form-control select-height" [(ngModel)]="selectedValue" placeholder="currency">
                          <option *ngFor="let item of items" [value]="item.typeId">{{item.title}}</option>
                        </select>