Блог

Главная - Вопросы по программированию - Угловой ngFor для перебора словаря

Угловой ngFor для перебора словаря

#angular

Вопрос:

У меня есть API C# , который возвращает a Dictionary<string, string> для <option> s из a <select> .

В Angular это становится переменной класса в компоненте, который я создаю для <select> as:

 options: { [id: string]: string };

(это предположение-должен ли я использовать какой-то другой тип?)

Как я могу повторить это, чтобы сделать <option> теги?

Это не работает

 <option ngFor="let o of options | keyvalue" [value]="o.key" [selected]="value === o.key"> {{ o.value }}</option>

Это неудовлетворительно из-за дополнительного .value , и, кроме " того, все вокруг этого

 <p *ngFor="let o of options | keyvalue"> {{ foo(o.value.key) }}/{{ foo(o.value.value) }}</p>

Комментарии:

1. пожалуйста, предоставьте стекблитц

2. Я не уверен, как вы извлекаете параметры, но, возможно, вам нужно использовать async , чтобы дождаться ответа для разрешения: *ngFor="let o of options | async | keyvalue"

3. У вас ngFor отсутствует звездочка. Это опечатка?

Ответ №1:

Вы можете использовать интерфейс KeyValue из @angular/common и загружать в него свои данные.

компонент.ts

 options: KeyValue<string, string>[] = [
    {
        key: "first",
        value: "blue"
    },
    {
        key: "second",
        value: "green"
    },
    {
        key: "third",
        value: "yellow"
    }
];

component.html

 <select>
    <option *ngFor="let option of options" [value]="option.key" [selected]="value === option.key">
        {{ option.value}}
    </option>
</select>

В html — файле ключ и значение должны быть такими, какие имена свойств указаны в вашем словаре возвращаемых параметров (с учетом регистра).

Метки: