Question

如何在编辑时设置下拉列表项的值。


首先我有BindDropDown（没问题，我已经做完了）

第二，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

尝试一下：

更改[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>

Answer 2

我将使用异步管道。

<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"

如何在Angular Material中设置Dropdwnlist值

2 个答案: