Угловой раскрывающийся список не отображает текст

Question

Я пытаюсь отобразить массив KeyValue элементов в p-dropdown угловом компоненте.Он выбирает правильный объем данных (5), но не отображает текст в раскрывающемся списке?

key-value.ts

export interface KeyValue {
    label: string;
    value: string;
}

дд.джон

{ 
  "Domains": [
    {"label": "North America (NAM)", "value": "NAM"}, 
    {"label": "Europe (EUR)", "value": "EUR"}, 
    {"label": "Australia (AUS)", "value": "AUS"}, 
    {"label": "Latin America (LAAM)", "vaule": "LAAM"}, 
    {"label": "Asia (APA)", "value": "APA"}
  ]
}

component.html

<div class="container">
  <div>Domain:<span class="required">*</span></div>
  <p-dropdown [options]="domains" formControlName="domain" optionLabel="text" (onChange)="dataChanged($event, 'domain')" placeholder="Select an option"></p-dropdown>
  <br>
</div>

component.ts

import { KeyValue } from '../../model/key-value';

export class RequestComponent implements OnInit {
  domains:  KeyValue[] = [];

  constructor(private service: Service) {}

  ngOnInit() {
    this.getPageData();
  }

  getPageData() {
    console.log("getPageData() First: " + this.domains);
    this.service.getDomains().subscribe(domains => {console.log("getPageData() Second: " + domains); this.domains = domains});
    console.log("getPageData() Third: " + this.domains);
  }
}

service.ts

@Injectable()
export class Service{

  constructor(private http: HttpClient) { }

  getDomains(): Observable<any> {
    return this.getJSON()
      .pipe(
        map(
          data => { data.Domains;
                    console.log("getDomains(): " + data.Domains); } ));}

  getJSON(): Observable<any> {
    return this.http.get("assets/dd.json");
  }
}

Консольные сообщения

getPageData() First: 
getPageData() Third: 
getDomains(): [object Object],[object Object],[object Object],[object Object],[object Object]
getPageData() Second: undefined

РЕДАКТИРОВАТЬ

Я сделал обновление для метода getDomains() и добавил дополнительный возврат:

getDomains(): Observable<any> {
  return this.getUNPProperties().pipe(map(data => { console.log("getDomains(): " + data.Domains); return data.Domains}));
}

Консольные сообщения выглядят следующим образом:

getPageData() First: 
getPageData() Third: 
getDomains(): [object Object],[object Object],[object Object],[object Object],[object Object]
getPageData() Second: [object Object],[object Object],[object Object],[object Object],[object Object]

Answer 1

Пожалуйста, установите для свойства optionLabel значение 'label'.По умолчанию раскрывающийся список PrimeNg примет label в качестве поля дисплея и value в качестве поля значения.При изменении значения optionLabel на 'text' будет найдено поле с именем text, которое недоступно в списке domains.

Таким образом, обновленный код для p-dropdown приведен ниже.

<p-dropdown 
   [options]="domains" 
   formControlName="domain" 
   optionLabel="label" 
   (onChange)="dataChanged($event, 'domain')" 
   placeholder="Select an option">
</p-dropdown>