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

Question

我有一个名为 update-data 的组件和一个名为 show-select 的子组件。 在父 HTML 文件中，我添加了选择器并尝试从子组件绑定事件。

<app-show-select (categorySelected)="onCategorySelected($event)"></app-show-select>

在 UpdateDataComponent 文件中，我只创建了一个基本的 console.log：

onCategorySelected(categorySelected: CategoriesModel): void {
  console.log('categorySelected: ', categorySelected);
}

我的问题来自我的子组件：我确实从中返回了一个值，但没有返回选定的值。

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

子组件 HTML 的灵感来自官方文档：

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

我的问题是我通过了类别列表的最后一个条目，而不是我选择的那个。 另一方面，当我添加时，我确实在这个模块中显示了正确的内容

<p> Category: {{category?.id||''}} {{category?.categoryName||'none'}} </p>

在 select 组件中，我在 HTML 页面中显示：

Category: 2 Some value

在控制台中，我显示了完全不同的内容，这些内容与我的 json 响应的最后一个条目以及使用 PrimeNg 自动完成时出现在输入中的选项相匹配：

CategorySelected:  {id: "56", categoryName: "OTHER CATEGORY", docDescription: "No description"}

Answer 1

我终于部分解决了关于我的问题的最重要部分：

我用点击事件修改了 p-autocomplete：

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

我创建了这个 function：

getCategoryDetails($event: MouseEvent): void {
  this.categoryId = this.category?.id;
  this.categorySelected.emit(this.category);
}