代码之家 › 专栏 › 技术社区 › Davi Resio

选项不显示在“启动”下拉列表中?

primeng angular

Davi Resio · 技术社区 · 7 年前

我试着在下拉列表中使用priming主题加载值。以下是下拉式底漆的文档:

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"
        }

我要显示描述和caputure 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>

1 回复 | 直到 7 年前

Daniel Gimenez 7 年前

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

地图法

应该没有理由更改HTML。在获取列表的值后,只需做一个映射。

class MyComponent {
  grupoList = [];

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

模板法

此方法可在下拉列表中为项目选项创建NG模板。使用此方法,您不必更改代码。

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