Установите другое значение, отличное от значения по умолчанию, в раскрывающемся списке angular 7

Question

У меня есть раскрывающийся список, в котором в качестве значения по умолчанию указано «США», что является правильным, но предположим, что пользователь из Индии, поэтому вместо этого я хочу указать «Индия» в раскрывающемся списке. Если пользователь из « США или любая другая страна, тогда в раскрывающемся списке отображается «США». Поэтому я хочу сохранить текущее местоположение пользователя в раскрывающемся списке. Но по умолчанию в раскрывающемся списке должно отображаться «US». Если пользователь из Индии, то в раскрывающемся списке укажите «Индия».

Просто, если пользователь из США или любой другой страны, по умолчанию в раскрывающемся списке отображается «США», но если пользователь из Индии, то в раскрывающемся списке он показывает Индию.

app.component.ts -

   countries = [
    { name: 'USA', id: '0' },
    { name: 'India', id: '1' }
];

 public onChange() {
    const userCountry = sessionStorage.getItem(this.appConstants.StorageKeys.UserCountry);
    if (userCountry !== null || userCountry !== '') {
        return userCountry;
        console.log(userCountry);
    } else {
        return this.countries;
    }
}

Here userCountry gives the current location of user i.e; India , Us, OR Any 
other country that we fetch from the api .

app.component. html

<select (click)="onChange()">
<option  *ngFor="let country of countries" [value]="country">{{ country.name }} 
</option>      
</select>

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

Answer 1

   countries = [
           { name: 'USA' },
           { name: 'India'}
        ];

   public selectedCountry: string = 'India';      

   <select>
   <option  *ngFor="let country of countries" [value]="country" 
   [selected]="country === selectedCountry">
   {{ country }}
   </option>
   </select>

   For reactive form use syntax for drodown -

  <select>
  <option *ngFor="let country of countries" value="{{country }}" 
  selected="country === {{selectedCountry}}">{{ country }}
  </option>
  </select>

Для другого способа раскрывающейся привязки реактивной формы вы также можете посетить- Использование элементов управления выбора в реактивной форме Следующие примеры показывают, как использовать элемент управления выбора в реактивной форме.

  import {Component} from '@angular/core';
  import {FormControl, FormGroup} from '@angular/forms';

  @Component({
  selector: 'example-app',
  template: `
  <form [formGroup]="form">
   <select formControlName="state">
    <option *ngFor="let state of states" [ngValue]="state">
      {{ state.abbrev }}
    </option>
   </select>
  </form>

 <p>Form value: {{ form.value | json }}</p> 
 <!-- {state: {name: 'New York', abbrev: 'NY'} } -->
  `,
 })
export class ReactiveSelectComp {
states = [
{name: 'Arizona', abbrev: 'AZ'},
{name: 'California', abbrev: 'CA'},
{name: 'Colorado', abbrev: 'CO'},
{name: 'New York', abbrev: 'NY'},
{name: 'Pennsylvania', abbrev: 'PA'},
];

form = new FormGroup({
 state: new FormControl(this.states[3]),
 });
}