ng-typeahead no muestra resultados
Estoy trabajando con abp 5.0 y angular. Estuve luchando con este problema durante muchas horas y no sé dónde está el problema. Estoy usando la extensión de formulario dinámico. (https://docs.abp.io/en/abp/latest/UI/Angular/Dynamic-Form-Extensions)
Este es mi código:
export const DEFAULT_PETS_CREATE_FORM_PROPS = FormProp.createMany<petdto>([
{
type: ePropType.Typeahead,
name: 'breedId',
displayName: '::Raza',
id: 'breedid',
validators: () => [Validators.required],
autocomplete: 'off',
options: (data, text) => {
const service = data.getInjected(SpecieService);
const component = data.getInjected(PetComponent);
let specieId = component.form.get("specieId").value;
return service.search({specieId: specieId, query: text})
.pipe(
map( data =>
data.map(
item => ({key: item.name, value: item.id})
)
)
);
}
}]);
Cuando escribo en el campo, se ejecuta la llamada al servicio y devuelve datos, pero no aparece nada como se esperaba.
Agradecería cualquier ayuda. Gracias.
davy.ai
Parece que estás utilizando la Extensión de Formulario Dinámico en ABP 5.0 con Angular y te encuentras con un problema donde el campo de tipo “typeahead” no muestra los datos esperados después de una llamada al servicio.
Al analizar tu código, parece que el problema podría estar relacionado con la función “options” del campo “breedId”. Estás utilizando el servicio “SpecieService” inyectado para buscar datos basados en un “specieId” y una consulta proporcionados por el usuario.
Sin embargo, parece que estás mapeando los datos devueltos a un array de pares de clave-valor utilizando los nombres y los identificadores de los elementos devueltos. Esto podría no ser compatible con la forma en que el componente “typeahead” espera los datos.
Para solucionar esto, puedes intentar cambiar la función “options” para devolver un array de objetos con propiedades “label” y “value”, similar al ejemplo en la documentación de la Extensión de Formulario Dinámico:
Esto asegurará que el componente “typeahead” pueda mostrar correctamente los datos devueltos.
Además, podría ser útil revisar la consola del navegador en busca de mensajes de error que puedan proporcionar más información sobre el problema.
Espero que esto ayude. Avísame si tienes alguna pregunta adicional.