2
respostas

Não consigo lista os itens de um <select <option>

Tenho uma tela onde devo mostrar uma lista de produto para o usuário seleciona apenas um, tentei fazer de varias formas, mas não conseguir, alguem pode me ajudar ? segue abaixo o código:

export class EntradaFormComponent implements OnInit {

  form: FormGroup;
  title: string;
  model: Entrada = new Entrada();
  produto: Produto = new Produto();
  listaProduto:  Produto[] = [];

Se eu colocar no html o código

json {{ listaProdutos | json }}
ele mostra os produtos, ou seja meu serviço de que retorna os produtos está ok.
json [ { "checked": false, "id": 3, "nome": "Feijão", "codigoBarras": "222", "descricao": "22222qqqq", "precoCusto": 222, "precoVenda": 222, "estoque": 22, "status": true, "produtoVenda": [], "persistent": true }, { "checked": false, "id": 4, "nome": "açucar", "codigoBarras": "999", "descricao": "99999", "precoCusto": 99, "precoVenda": 999, "estoque": 99, "status": true, "produtoVenda": [], "persistent": true } ]

Pagina html

<div class="card-panel">

    <h5>{{ title }}</h5>

    <div class="row">
        <form materialize class="col s12" [formGroup]="form"
            (ngSubmit)="save()">

            <input id="id" type="hidden" readonly="true" [(ngModel)]="model.id"
                formControlName="id">

            <div class="row">
                <div class="input-field col s6">
                    <input id="numeroNota" type="text" class="validate"
                        [(ngModel)]="model.numeroNota" formControlName="numeroNota"
                        [class.invalid]="form.controls['numeroNota'].touched && !form.controls['numeroNota'].valid" />
                    <label class="active" for="numeroNota">Numero Nota*</label>
                </div>

                <div class="input-field col s6">
                    <input id="data" type="date" class="validate"
                        [(ngModel)]="model.data" formControlName="data">
                    <label for="data" class="active">Data</label>
                </div>
            </div>

            <div class="row">
                <div class="input-field col s3">
                    <!-- Não renderiza a lista de produto-->
                    <label for="produto" class="active">Produto</label>    
                    <select formControlName="produto">
                        <option *ngFor="let produto of listaProduto" [value]="produto.id">{{produto.nome}}</option>
                    </select>

                </div>

            </div>

            <div class="row">
                <div class="input-field col s3"></div>

            </div>

            <a class="btn-floating red darken-4" routerLink="/produtos"> <i
                class="material-icons tiny">arrow_back</i>
            </a>

            <button class="btn-floating red darken-4" type="submit"
                [disabled]="!form.valid">
                <i class="material-icons tiny">check</i>
            </button>

        </form>
    </div>
</div>

Muito obrigado

2 respostas

Bom dia Claudemir.

Você diz que não consegue, mas qual erro você recebe???

Claudemir, no console mostra algum erro para você ?