使用 primeNg 和 Angular 10 将自动完成 select 值传递给父组件

Question

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"}

Answer 1

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);
}