انگولار - p-dropdown برچسب صحیح را نمایش نمیدهد وقتی متغیر ngModel یک شیء باشد

من از کامپوننت p-dropdown در PrimeNG استفاده میکنم. وقتی صفحه ابتدا بارگذاری میشود، من مقدار ng-model را تنظیم میکنم اما لیست کشویی همیشه اولین عنصر را به عنوان عنصر انتخاب شده نشان میدهد.

اچتیامال

<p-dropdown [options]="cities" [(ngModel)]="selectedCity"  optionLabel="name" [showClear]="true"></p-dropdown>
<p>Selected City: {{selectedCity ? selectedCity.name : 'none'}}</p>

TS

this.cities = [
            {label:'New York', value:{id:1, name: 'New York', code: 'NY'}},
            {label:'Rome', value:{id:2, name: 'Rome', code: 'RM'}},
            {label:'London', value:{id:3, name: 'London', code: 'LDN'}},
            {label:'Istanbul', value:{id:4, name: 'Istanbul', code: 'IST'}},
            {label:'Paris', value:{id:5, name: 'Paris', code: 'PRS'}}
        ];

اینجا نیویورک به عنوان مورد انتخابشده در منوی کشویی نمایش داده میشود حتی اگر من ng-model را به شهری دیگر تغییر دهم.

پاسخ شماره ۱

فکر میکنم مشکل شما در optionLabel="name" است زیرا شیء شهر شما شامل کلید name نمیباشد.

یا آن را با optionLabel="label" جایگزین کنید یا شیء شهر خود را از

{label:'New York', value:{id:1, name: 'New York', code: 'NY'}}

به

{name:'New York', value:{id:1, name: 'New York', code: 'NY'}}

StackBlitz را ببینید

پاسخ شماره ۲

من از یک سرویس برای وارد کردن گزینهها از بخش پشتی خود استفاده کردم (نسخه ناقص):

<p-dropdown
  class="mt-2"
  [options]="this.groupOptions"
  [(ngModel)]="this.selectedOption"
  [loading]="isLoading"
  placeholder="Choose a usergroup to activate" />

متغیر groupOptions در سازنده مقداردهی اولیه شد:

constructor(private _backendService: SomeControllerService) {
    this._backendService.getAllUserGroups().subscribe(groups => {
      this.groupOptions = [];
      groups.forEach(g =>
        this.groupOptions!.push({
          label: g.name??"Error",
          value: g.id??-1
        }));
    });
}

مشکل این است که دادهها خیلی دیر بارگذاری میشوند و primeng نمیتواند منوی کشویی را به درستی بسازد. سپس من این دایرکتیو ساده را در API پرایمانجی پیدا کردم که مشکل من را مثل جادو حل کرد (بارگذاری).

نسخه ثابت:

 <p-dropdown
  class="mt-2"
  [options]="this.groupOptions"
  [(ngModel)]="this.selectedOption"
  [loading]="isLoading"
  placeholder="Choose a usergroup to activate" />

فقط نیاز است متغیر را بهروزرسانی کنید:

isLoading: boolean = true;    
constructor(private _backendService: SomeControllerService) {
    this._backendService.getAllUserGroups().subscribe(groups => {
      this.groupOptions = [];
      groups.forEach(g =>
        this.groupOptions!.push({
          label: g.name??"Error",
          value: g.id??-1
        }));
    isLoading: boolean = false;
    });
}