I have a component name update-data and a child component named show-select. In the parent HTML file I do add the selector and try to bind event from child component.
<app-show-select (categorySelected)="onCategorySelected($event)"></app-show-select>
In the UpdateDataComponent file I just make a basic console.log:
onCategorySelected(categorySelected: CategoriesModel): void {
console.log('categorySelected: ', categorySelected);
}
My issue is coming from my child component: I do return a value from it but not the selected one.
export class ShowSelectComponent implements OnInit {
categories: CategoriesModel[];
filteredCategories: CategoriesModel[];
category: CategoriesModel;
@Output() categorySelected = new EventEmitter<CategoriesModel>();
categoryId: number;
constructor(private apiService: ApiService) { }
ngOnInit(): void {
this.getCategories();
}
private getCategories(): void {
const response = this.apiService.getCategories().subscribe(
(data) => {
this.categories = data as CategoriesModel[];
}
);
console.log('Get categories');
console.log('response ', response);
}
filterCategories(event): void {
this.filteredCategories = [];
// tslint:disable-next-line:prefer-for-of
for (let i = 0; i < this.categories.length; i++) {
this.category = this.categories[i];
if (this.category.categoryName.toLowerCase().indexOf(event.query.toLowerCase()) === 0) {
console.log(this.category.categoryName);
this.filteredCategories.push(this.category);
}
}
this.categoryId = this.category?.id;
this.categorySelected.emit(this.category);
}
}
The sub component HTML is inspired of the official documentation:
<p-autoComplete
[(ngModel)]="category"
[suggestions]="filteredCategories"
field = "categoryName"
(completeMethod)="filterCategories($event)"
[size]="30"
[minLength]="1" placeholder="Hint: type a letter"
[dropdown]="true">
<ng-template let-category pTemplate="category">
<div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
{{category.id}} {{category.categoryName}}
</div>
</ng-template>
</p-autoComplete>
My issue is that i pass the last entry of the categories list and not the one I selected. On the other hand, i do display the right content in this module when I add
<p> Category: {{category?.id||''}} {{category?.categoryName||'none'}} </p>
In the select component I display in the HTML page:
Category: 2 Some value
In the console I display something totally different which match to the last entry of my json response and a choice that appears in the input when using Autocomplete with primeNg:
CategorySelected: {id: "56", categoryName: "OTHER CATEGORY", docDescription: "No description"}
I finally solved partially the most important part concerning my issue:
I modified the p-autocomplete with a click event:
<p-autoComplete
[(ngModel)]="category"
...
(click)="getCategoryDetails($event)"
...>
<ng-template let-category pTemplate="category">
<div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
{{category.id}} {{category.categoryName}}
</div>
</ng-template>
</p-autoComplete>
I created this function:
getCategoryDetails($event: MouseEvent): void {
this.categoryId = this.category?.id;
this.categorySelected.emit(this.category);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.