Autocomplete 使用自动完成和传递REST对象的角度素描

我对启动自动完成有一个问题： 当我输入任何研究时，我在输入文本中获得[Object]

首先，我有一个获取数据集的API调用：

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

它允许我正确地检索数据（这里是一个示例）：

现在，我尝试处理javascript对象数组以过滤它们：

我在组件中定义了成员变量：

categories: CategoriesModel[];
filteredCategories: CategoriesModel[];
category: CategoriesModel;

我将此代码添加到HTML模板中：

<p-autoComplete
  [(ngModel)]="category"
  [suggestions]="filteredCategories"
  (completeMethod)="filterCategories($event)"
  [size]="30"
  [minLength]="1" placeholder="Hint: type a letter"
  [dropdown]="true">

  <ng-template let-category pTemplate="item.categoryName">
    <div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
      {{category.id}}
      <div style="font-size:18px;float:right;margin:10px 10px 0 0">{{category.categoryName}}</div>
    </div>
  </ng-template>

</p-autoComplete>
<span style="margin-left:50px">Category: {{category?.categoryName||'none'}}</span>

{{category.id}
{{category.categoryName}
类别：{Category？.categoryName | |'none'}

现在，我尝试使用将在列表结果中显示的筛选方法：

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

filterCategories（事件）：无效{
this.filteredCategories=[]；
//tslint:禁用下一行：首选
for（设i=0；i

我最终通过修改模板解决了这个问题：

<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="categoryName">
    <div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
      {{category.id}} {{category.categoryName}}
    </div>
  </ng-template>

</p-autoComplete>

{{category.id}{{category.categoryName}}

<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="categoryName">
    <div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
      {{category.id}} {{category.categoryName}}
    </div>
  </ng-template>

</p-autoComplete>