Entrar Ainda não tem acesso?
2
respostas

Select com lista de object

Referente ao curso Angular 2: webapps ainda mais poderosas parte 2

por Maciel Kamers Gonçalves
| 113.3k xp | 5 posts
CTO

Estou com problemas ao implementar o componente select. Minha API retona um objeto que possui a propriedade {cliente: Object}. No meu componente select eu faço um *ngFor="let cliente of clientes", sendo clientes um array de object retornado pela API. Código

<select class="form-control input-lg" formControlName="cliente" name="cliente" [(ngModel)]="usuario.cliente">
    <option [ngValue]="">Selecione</option>
    <option *ngFor="let cliente of clientes" [ngValue]="cliente">{{cliente.nome}}</option>              
 </select>

Na view não aparece o item selecionado. Tentei utilizar:

[selected]="usuario.cliente.codigo==cliente.codigo ? true : null"

No código fonte da página aparece:

<option _ngcontent-xwp-7="" value="1: Object" ng-reflect-ng-value="[object Object]" ng-reflect-selected="true">NOME CLIENTE</option>

Mas esse ng-reflect-selected="true" não faz ficar o item selecionado na tela.

2 respostas
por Alex Alves de Almeida
| 111.3k xp | 13 posts

Olá! Seria ngValue ou apenas value? Então eu faria o código assim:

 <option *ngFor="let cliente of clientes" [value]="cliente">{{cliente.nome}}</option>

Não testei o código, veja se te atende! Abraço

por Maciel Kamers Gonçalves
| 113.3k xp | 5 posts
CTO

Também não funciona, com a opção [value] ele sempre me mostrar o primeiro item do array de clientes selecionado.

Dessa maneira consegui fazer ficar selecionado o item correspondente:

<option *ngFor="let cliente of clientes2" [value]="cliente" [selected]="usuario.cliente.codigo==cliente.codigo ? true : null">{{cliente.nome}}</option>

Mas se eu der com console.log no objeto usuario, a propriedade cliente fica com valor "[object Object]", uma string...

Object {id: 1, empresa: Object, cliente: "[object Object]", nome: "USUARIO", email: "usuario@email.com.br"…}

Eu estava com o projeto na versão 2.4 atualizei pra 4.2, tentei fazer de varias formas, mas não da certo. A única maneira que consegui fazer funcionar 100% foi utilizando o componente p-dropdown da biblioteca PrimeNG. Com componente simples HTML não consegui.