Oye, estoy tratando de implementar un menú desplegable bootstrap5 siguiendo este ejemplo: Creación de un menú desplegable de selección múltiple con Angular y Bootstrap 5 En ese ejemplo, para obtener los datos, usa un servicio de aplicación y solo devuelve una matriz de objetos:
getFoods(): Food[] { return [ { id: 1, name: 'Grapes' }, { id: 2, name: 'Melon' }, ...Y luego, en su ngOnInit() llama al método getFoods() y también usa el operador .map() porque tiene que asignar valores porque el modelo de artículo tiene dos valores:
ngOnInit(): void { this.items = this.appService.getFoods().map(fruit => ({ id: fruit.id, name: fruit.name } as Item)); }Así que estoy tratando de hacer sombrero, pero con los datos que se obtienen de un punto final de la API mediante la solicitud HTTP GET. Pero no sé cómo usar el operador .map() para la solicitud de obtención de http:
this.subscription = this.contactSearchService.currentCodes.pipe( map( code => ( { id: code.code, name: code.code } ) )).subscribe(Response => { this.items = Response })Me esta dando estos errores:
Property 'code' does not exist on type 'ResponsibilityCode[]'. Type '{ id: any; name: any; }' is missing the following properties from type 'Item[]': length, pop, push, concat, and 26 more.Mi función de solicitud de obtención de http:
private _reponsibilityCodeSource = new BehaviorSubject<ResponsibilityCode[]>([]); currentCodes = this._reponsibilityCodeSource.asObservable(); getCodes(): void { this.http.get<ResponsibilityCode[]>('https://localhost:44316/api/SITEContacts/ResponsibilityCode').subscribe(Response => { this._reponsibilityCodeSource.next(Response); }); } I get the data as `JSON` btw.La pipe(map(.... code...)) es diferente de array.map: la pipe(map()) no opera en cada elemento de una matriz
Entonces, los errores que está recibiendo se deben a que está intercambiando la matriz de ResponsibilityCode por un solo elemento (el code en su código son todos los códigos de responsabilidad)
Probar
this.subscription = this.contactSearchService.currentCodes.subscribe(Response => { this.items = Response.map( code => ( { id: code.code, name: code.code } ) ) })Su obtención de HTTP devuelve una matriz Observable of ResponsibilityCode , por lo que para lograrlo debe map ( Array.prototype.map ) los elementos de la matriz dentro del operador de mapa de RxJS, como el siguiente:
this.subscription = this.contactSearchService.currentCodes .pipe( map((res: ResponsibilityCode[]) => res.map((item) => ({ id: item.id, name: item.name, })) ) ) .subscribe((res) => { this.items = res; });