带prime ng自动完成的角度不起作用

Question

我正在尝试使用 PrimeNG 的高级自动完成功能。请参阅下面的图片和文档链接：

https://www.primefaces.org/primeng/#/autocomplete

如果我从 PrimeNG 教程中复制并粘贴主题代码，效果很好，如下所示：

HTML 文件：

  <p-autoComplete id="acAdvanced" [(ngModel)]="selectedBrands" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" [size]="30"
                        [minLength]="1" [dropdown]="true" multiple="true">
                        <ng-template let-brand pTemplate="item">
                            <div class="ui-helper-clearfix">
                                <img src="assets/demo/images/car/{{brand}}.gif" style="width:32px;display:inline-block;margin:5px 0 2px 5px"/>
                                <div style="font-size:18px;float:right;margin:10px 10px 0 0">{{brand}}</div>
                            </div>
                        </ng-template>
                    </p-autoComplete>

TS 文件：

brands: string[] = ['Audi', 'BMW', 'Fiat', 'Ford', 'Honda', 'Jaguar', 'Mercedes', 'Renault', 'Volvo', 'Volkswagen'];

    filteredBrands: any[];

    selectedBrands: string[];

filterBrands(event) {
        this.filteredBrands = [];
        for (let i = 0; i < this.brands.length; i++) {
            const brand = this.brands[i];
            if (brand.toLowerCase().indexOf(event.query.toLowerCase()) === 0) {
                this.filteredBrands.push(brand);
            }
        }
    }

但是我需要接收一个 JSON 对象数组，显示它并按描述过滤，并且选择的值需要是一个 ID。如果我只放置字符串值的数组，就像在教程中一样，它可以工作！但是它有很多空格。 如果我过滤以显示和过滤 json 对象，它将不起作用。

我的代码：

HTML 文件：

<p-autoComplete id="acAdvanced" [suggestions]="grupoListFiltrado.Descricao" (completeMethod)="filtrarGrupo($event)" [size]="30" formControlName="IdGrupo"
[minLength]="1" [dropdown]="true" multiple="true">
<ng-template let-grupo pTemplate="item">
    <div cla9ss="ui-helper-clearfix">
        <div style="font-size:18px;float:left;margin:10px 10px 0 0">{{grupo}}</div>
    </div>
</ng-template>
</p-autoComplete>

TS 文件：

 grupoListFiltrado: any[];
  public grupoList: any[];


this.produtoAgilService.listarGrupo().subscribe(res=>{
      for(let i in res){
        this.grupoList.push(res[i])
      }
    }

filtrarGrupo(event) {
  this.grupoListFiltrado = [];
  for (let i = 0; i < this.grupoList.length; i++) {
      const grupo = this.grupoList[i];

      if (grupo.Descricao.toLowerCase().indexOf(event.query.Descricao) === 0) {
          this.grupoListFiltrado.push(grupo);
      }
    }
  }

JSON 对象：

{
            "$id": 1,
            "@xdata.type": "XData.Default.Grupo",
            "Id": 2,
            "Descricao": "Tributada para Comercialização",
            "EstoqueMin": 5,
            "EstoqueMax": 20,
            "Iat": "A",
            "Ippt": "T",
            "Ncm": "28220010",
            "Validade": 0,
            "PercentualLucro": 50,
            "PercentualDesconto": 5,
            "PercentualComissao": 5,
            "NrCaracterCodInterno": 7,
            "TipoProduto": 0,
            "Foto": null,
            "ItemSped": "00",
            "IdGrupoTributario@xdata.proxy": "Grupo(2)/IdGrupoTributario",
            "IdUnidadeProduto@xdata.proxy": "Grupo(2)/IdUnidadeProduto",
            "IdSecao@xdata.proxy": "Grupo(2)/IdSecao",
            "IdCategoria@xdata.proxy": "Grupo(2)/IdCategoria",
            "IdSubCategoria@xdata.proxy": "Grupo(2)/IdSubCategoria",
            "IdMarca@xdata.proxy": "Grupo(2)/IdMarca"
        }

我已经在日志中确认我收到了一个包含 16 个元素的数组

为什么现在显示，我该怎么做？

Answer 1

[suggestions] 标签必须引用一个 Object 而不是 this 的属性。

    <p-autoComplete id="acAdvanced" [suggestions]="grupoListFiltrado" (completeMethod)="filtrarGrupo($event)" [size]="30" formControlName="IdGrupo" [minLength]="1" [dropdown]="true" multiple="true">
      <ng-template let-grupo pTemplate="item">
        <div cla9ss="ui-helper-clearfix">
            <div style="font-size:18px;float:left;margin:10px 10px 0 0">{{grupo}}     </div>
        </div>
      </ng-template>
    </p-autoComplete>

自动完成等待字符串数组，因此您必须只推送字符串而不是整个组。

与文本输入的比较应仅使用“event.query”进行。这里没有“.Descricao”。

我建议使用 startsWith 而不是 indexOf。

filtrarGrupo(event) {
  this.grupoListFiltrado = [];
  for (let i = 0; i < this.grupoList.length; i++) {
      const grupo = this.grupoList[i];

      if (grupo.Descricao.toLowerCase().startsWith(event.query) === 0) {
          this.grupoListFiltrado.push(grupo.Descricao);
      }
  }
}