Question

我正在尝试使用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>

我有数字数组大小的空白选项，但是我无法显示说明

@EDIT

代码不起作用...

我的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

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

地图方法

应该没有理由更改您的HTML。在获取列表值之后，只需做一张地图即可。

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>

选项未显示在primeng下拉菜单中？

1 个答案: