Estoy usando primeng Multiselect, he escrito algo de lógica para enviar datos en función del valor de búsqueda desde el backend, para presionar el elemento tenemos que inicializarlo primero, otro me da un error de empuje de indefinido, pero cuando lo uso inicializando los menús desplegables variable de matriz, no me muestra los datos que obtuve de la API.

Por otro lado, cuando no estoy inicializando la variable de datos desplegable y asignando directamente los datos que obtuve de la API, entonces está funcionando,

Adjunto el enlace de stackblitz donde me enfrento al problema:

https://stackblitz.com/edit/primeng-multiselect-demo-qykbzn?file=src%2Fapp%2Fapp.component.ts

este es un código de trabajo cuando no lo estoy inicializando

 dropdownData; getCountryData(countryName: string) { const url = 'https://restcountries.com/v3.1/name'; this.http .get(`${url}/${countryName}?fullText=true`) .pipe(debounceTime(20000)) .subscribe((data) => { this.dropdownData = data.map((item) => ({ ...item, countryName: item.name.common, code: item.fifa })); // if (localDropdownData.length) { // localDropdownData.forEach((element) => { // this.dropdownData.push(element); // }); // } console.log('data', this.dropdownData); this.cd.detectChanges(); }); }