角度与素数ng自动完成不工作

我正在尝试使用自动完成高级的素描。请参见下面的图片和文档链接:

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

如果我从素描教程中复制和粘贴主题代码,它会很好地工作,如下所示:

HTML文件:

<p-autocomplete id=“acadvanced”[(ngmodel)]=“selectedBrands”[建议]=“filteredBrands”(completeMethod)=“filterBrands($event)”[大小]=“30”
[MinLength]=“1”[DropDown]=“真”multiple=“真”>
<ng template let brand ptemplate=“item”>
<div class=“ui helper clearfix”>
<img src=“assets/demo/images/car/.gif”style=“width:32px;display:inline block;margin:5px 0 2px 5px”/>
<DIV style=“FONT SIZE:18px;FLOAT:RIGHT;MARGIN:10px 10px 0 0”></DIV>
</DIV>
</ng模板
</p-自动完成>
TS文件:

brands:string[]=[‘奥迪’、‘宝马’、‘菲亚特’、‘福特’、‘本田’、‘捷豹’、‘梅赛德斯’、‘雷诺’、‘沃尔沃’、‘大众’];

过滤品牌:任意[];

所选品牌:字符串[];

过滤品牌(活动){
this.filteredbrands=[];
对于(让i=0;i<this.brands.length;i++){
const brand=this.brands[i];
if(brand.tolowercase().indexof(event.query.tolowercase())==0){
这个。过滤品牌。推(品牌);
}
}
}
但是我需要接收一个JSON对象数组,显示它并按描述过滤,所选的值需要是一个ID。如果我只放置字符串值数组,就像在教程中一样,它可以工作!但是它有很多空白。
如果我过滤以显示和过滤JSON对象,它将不起作用。


我的代码:

HTML文件:

<p-autocomplete id=“acAdvanced”[Suggestions]=“grupolistfiltrado.descricao”(completemethod)=“filtrargrupo($event)”[size]=“30”formcontrolname=“idgrupo”
[MinLength]=“1”[DropDown]=“真”multiple=“真”>
<ng template let grupo ptemplate=“item”>
<DIV CLA9SS=“ui helper clearfix”>
<DIV style=“FONT SIZE:18px;FLOAT:LEFT;MARGIN:10px 10px 0 0”></DIV>
</DIV>
</ng模板
</p-自动完成>
TS文件:

grupolistfiltrado:any[];
公共Grupolist:任何[];


this.produoagilservice.listargrupo().subscribe(res=>){
用于(让我加入Res){
这个。粗暴的推(Res[I])
}
}

filtrargrupo(事件){
this.grupolistfiltrado=[];
对于(让i=0;i<this.grupolist.length;i++){
const grupo=this.grupolist[i];

if(grupo.descricao.tolowercase().indexof(event.query.descricao)==0){
这个。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”,
“有效”:0,
“PercentualLucro”:50,
“PercentualDesconto”:5,
“PercentualComissao”:5,
“nrcactercodinterno”:7,
“TipoProduto”:0,
“foto”:空,
“itemsped”:“00”,
“idgrupotributario@xdata.proxy”:“grupo(2)/idgrupotributario”,
“idunidaedeproduto@xdata.proxy”:“grupo(2)/idunidaedeproduto”,
“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个ITEN的数组

为什么它现在被展示,我该怎么做?



如果我从素描教程复制和粘贴主题代码,它会很好地工作,如下所示:

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个ITEN的数组

为什么它现在被展示,我该怎么做?