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个itens数组

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

Answer 1

[suggestions]标记必须引用一个Object而不是其属性。

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

与素ng自动完成的角度不起作用

1 个答案: