ngOptions не работает, даже с базовым примером

#html #angular #typescript #html-select

#HTML #angular #typescript #html-select

Вопрос:

Я очень новичок в Angular и немного перегружен.

Насколько я понимаю, у меня есть компонент, из которого я могу отображать данные типа {{ this }} , который работает нормально. Теперь я хочу выбрать те данные, которые есть в component.ts . Это массив строк:

 private strategies: string[] = ["ASAP", "Wamp;T"];

Теперь, в моем component.html , я хочу создать select с этими строками в качестве опций.

 <select ngModel="result" ngOptions="value for value in strategies">
</select>
{{ result }}

Но список опций всегда пуст. {{ strategies }} выдает ASAP,Wamp;T , что правильно. Даже если я использую базовый пример, такой как:

 <select ngModel="result" ngOptions="value for value in ['a', 'b']">
</select>

список опций полностью пуст. Чего мне не хватает?

Ответ №1:

Вам нужно использовать ngFor on options для создания опций в angular (v2 ): Также убедитесь, что strategies определенные в компоненте являются общедоступными и, следовательно, доступны в шаблоне.

 <select  [(ngModel)]="result">
    <option *ngFor="let strategy of strategies" [value]="strategy">
        {{strategy.name}}
    </option>
</select>

Также убедитесь, что вы используете имя переменной из *ngFor для привязки значения и атрибута отображения для опций.

ng-options был частью AngularJS и не используется в Angular v2 .

1. Действительно? Я где-то читал в Stackoverflow, что это на самом деле плохая практика. Я знаю, что это работает следующим образом, но я думал, что ngOptions — это правильный путь.

2. Angular v2 не поддерживается ng-options . Он был включен в AngularJS, сейчас он удален.

Ответ №2:

AngularJS мы используем ngOptions директиву create список элементов для select, но начиная с Angular 2 и выше Angular предоставляет новую структурную директиву, *ngFor которая поможет создать динамический список.

И для получения выбранного значения из html Angular предоставьте директиву двусторонней привязки данных, вызываемую ngModel . Привязка двух данных в Angular 2 немного отличается, как показано ниже

Пример —

 <select  [(ngModel)]="result">
    <option *ngFor="let strategy of strategies" [value]="strategy">
        {{strategy.name}}
    </option>
</select>

Надеюсь, это поможет!