Как установить значение Dropdwnlist в Angular Material

Question

Как установить значение элементов раскрывающегося списка при редактировании.

1. Сначала у меня был BindDropDown (нет проблем, я сделал)
2. Во-вторых, OnEdit. Я хочу установить значение selectecd выпадающего списка на основе значения, полученного из сервисного вызова.

У меня было две html-страницы. Первая страница - сводная страница, где я отображаю список записей в таблице. Вторая страница - это форма моего города. Когда я нажимаю кнопку «Изменить» внутри таблицы, она перенаправляется на вторую страницу, и мне нужно установить все значения во второй форме.

Для ввода типа текста: я могу установить название города, код города и т. Д. И т. Д. Но для выпадающего списка значение не выбирается.

component.html


<form #cityform="ngForm">
<mat-select  placeholder="Select Country" disableOptionCentering name="CountryId"   [(ngModel)]="_city.CountryId"  >
<mat-option value="0">--Select Country--</mat-option>
<mat-option *ngFor="let _country of drpcountry" [value]="_country.value" >
                              {{_country.description}}
</mat-option>
</mat-select>
</form>

city.ts

export class city {
    public CityId: any;
    public CityCode: string;
    public CityName: string;
    public StateId: any;
    public CountryId: any;

}

.ts

        export class AddeditcityComponent implements OnInit {
         _city: city = new city();
        drpcountry:any;
        constructor(){}

        ngOnInit() {
         this.BindDropdown();
         this._city = "services call"
        }
         BindDropdown() {
  this._httpdrp.GetData(mdlcountry).pipe(takeUntil(this._unsubscribeAll)).subscribe(
            data => {
   this.drpcountry = data;
} );
         drpcountry=//Service call;
        }

    }

Обновление: Массив drpCountry

{CityId: 7, CityCode: "SUR", CityName: "Surat", StateId: 4, CountryId: 2}

Answer 1

Я бы использовал асинхронную трубу.

<form #cityform="ngForm">
  <mat-select  placeholder="Select Country" disableOptionCentering name="CountryId"   [(ngModel)]="city.CountryId"  >
  <mat-option value="0">--Select Country--</mat-option>
  <mat-option *ngFor="let country of (drpcountry | async)?.drpcountry" [value]="country.value" >
                                {{country.description}}
  </mat-option>
  </mat-select>
  </form>

  BindDropdown() {
    this.drpcountry = // A service that returns an observable
    /*
       Something like this
       listCity(): Observable<City[]> {
         return this.http.get<City[]>(this.url);
       }
    */
   }

Эта строка позволяет, когда список городов получен, он отображается.

*ngFor="let country of (drpcountry | async)?.drpcountry"

Answer 2

Попробуйте это:

Измените [value] = "_ country.CountryId".Значение ngModel и значение должны иметь одинаковое значение, которое будет связывать значение при редактировании.так, например, _country.value=1 и _city.CountryId=1, тогда при редактировании значение будет установлено в раскрывающемся списке на основе значения ngModel.

component.html

<form #cityform="ngForm">
<mat-select  placeholder="Select Country" disableOptionCentering name="CountryId"   [(ngModel)]="_city.CountryId"  >
<mat-option value="0">--Select Country--</mat-option>
<mat-option *ngFor="let _country of drpcountry" [value]="_country.CountryId" >
                              {{_country.description}}
</mat-option>
</mat-select>
</form>