angular - 选项未显示在 primeng 下拉列表中？

Question

我正在尝试使用 primeng 主题在下拉列表中加载值。这是下拉 primeng 的文档:

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

我想在不使用 ngfor 的情况下放置值，因为在我看到的文档模型中可以做到这一点，我收到了这个 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"
        }

我想显示描述，并在值中捕获 id。

我的代码是这样的:

   <div class="ui-g-12 ui-md-6">
    <p-dropdown [options]="grupoList.Descricao" placeholder="Grupo" formControlName="IdGrupo" [autoWidth]="false" value="grupoList.Id"></p-dropdown>
    </div>

但什么都不显示

如果我这样做:

   <div class="ui-g-12 ui-md-6">
       <p-dropdown [options]="grupoList" placeholder="Grupo" formControlName="IdGrupo" [autoWidth]="false"></p-dropdown>
   </div>

我有数字数组大小的空白选项，但我无法显示描述

@编辑

代码无效...

我的 ts 文件:

this.produtoAgilService.listarGrupo().subscribe(res=>{
      for(let i in res){
        this.grupoList.push(res[i])
      }
      this.grupoList.map(x =>({
        label: x.Descricao,
      value: x.Id
    }))

我的 html 文件:

<p-dropdown [options]="grupoList" placeholder="Grupo" formControlName="IdGrupo" [autoWidth]="false">
              <ng-template let-item pTemplate="selectedItem"> 
                <b>{{item.Descricao}}</b> <!-- highlighted selected item -->
              </ng-template> 
              <ng-template let-item pTemplate="item"> 
                {{item.Descricao}}
              </ng-template>
            </p-dropdown>

Answer 1

有两种方法可以处理这种情况，要么必须将数组映射到具有成员标签和值的对象数组，要么需要创建自己的自定义模板。

map 方法

应该没有理由更改您的 HTML。获取列表的值后，只需做一张 map 。

class MyComponent {
  grupoList = [];

  ngOnInit() {
    this.grupoList = this.somefunctionToGetValueArray().map(x => ({
      label: x.Descricao,
      value: x.$id
    }));
  }
}

模板方法

您可以在下拉菜单中为项目选项创建 ng-templates。使用此方法，您不必更改代码。

<p-dropdown [options]="grupoList" placeholder="Grupo" formControlName="IdGrupo" [autoWidth]="false">
  <ng-template let-item pTemplate="selectedItem"> 
    <b>{{item.Descricao}}</b> <!-- highlighted selected item -->
  </ng-template> 
  <ng-template let-item pTemplate="item"> 
    {{item.Descricao}}
  </ng-template>
</p-dropdown>