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

Question

У меня есть следующий код для отображения выбора стран:

<div class="col">
    <select name="country" id="country" class="form-control" ngModel required>
      <option *ngFor="let country of countries; let i = index" [selected]="country.name.common === 'United States'" [value]="country.name.common">{{country.name.common}}</option>
    </select>
    <img src="/assets/images/icons/chevron-down.svg" alt="Dropdown" class="chevron-icon">
</div>

При инициализации компонент извлекает свои данные из файла JSON внутри моей папки ресурсов.Это работает - выбор с его странами отображается. Как я могу определить предварительно выбранное значение.

Как видите, мой подход состоял в том, чтобы установить [selected] с условием, но оно не работает.Изменив его на [selected]="country.name.common", вы предварительно выберете последнюю страну списка.

Answer 1

Вы должны удалить ngModel, поэтому ваш код должен быть

<select name="country" id="country" class="form-control" required>
      <option *ngFor="let country of countries; let i = index" [selected]="country.name.common === 'United States'" [value]="country.name.common">{{country.name.common}}</option>
    </select>

Демо

ИЛИ

Удалить selected attr иустановить [(ngModel)]="selectedCountry" и установить в componentenet.ts selectedCountry="countryname" Демо

Answer 2

В вашем component.ts используйте имя для выбора и присвойте ему желаемое значение, например:

countries.map((country) => {
if(country.name.common === 'United States') {
// assign here
}
})