Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Não consigo implementar o ngfor no meu template com <select><option>

Estou tentando colocar esse ngfor com o select option alimentando o template com uma api que retorna alguns valores, mas sempre dá erro dizendo que não pode usar o ngfor no meu template.Como posso usar isso no meu template para que quando carregar no meu construtor alimentar meus selects?

5 respostas

Danilo, qual o erro que aparece especificamente? Consegue me mostrar um trecho do seu código ou subir o mesmo no github?

Danilo, você pode postar como está o seu componente?

Você tbm verificou se está correta a associação de dados na variável que vc está iterando (se ela é um array)?

abraços

erro :

Can't bind to 'ng-model' since it isn't a known property of 'select'. ("
<label>Cliente</label>

<select [ERROR ->][(ng-model)]="cliente">
        <option *ng-for="let cliente of clientes" [value]="clientes.razao_so"): cadastroUsuarioComponent@26:8
Can't bind to 'ng-forOf' since it isn't a known property of 'option'. ("

<select [(ng-model)]="cliente">
        <option [ERROR ->]*ng-for="let cliente of clientes" [value]="clientes.razao_social">{{clientes.razao_social}}</option>
"): cadastroUsuarioComponent@27:16
Property binding ng-forOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" section. ("

<select [(ng-model)]="cliente">
        [ERROR ->]<option *ng-for="let cliente of clientes" [value]="clientes.razao_social">{{clientes.razao_social}}</"): cadastroUsuarioComponent@27:8 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
Can't bind to 'ng-model' since it isn't a known property of 'select'. ("
<label>Cliente</label>

minha classe que retorna um array para preenchimento:

import {Component} from '@angular/core';
import {Usuarios} from '../usuarios/usuarios.component';
import {Http,Headers} from '@angular/http';
import {Clientes} from '../clientes/clientes.component';

@Component({
    selector : 'cadastroUsuario',
    templateUrl: './app/cadastroUsuario/cadastroUsuario.component.html'
})

export class cadastroUsuarioComponent {

    usuarios:Usuarios = new Usuarios();
    clientes:Object[] = [];

    http:Http;

        constructor(http:Http){
            this.http = http;

            http.get('/clientes')
            .map(res => res.json())
            .subscribe(cliente => {
                this.clientes = cliente;
                console.log(this.clientes);
            },erro=> console.log(erro));
        }

       cadastrar(event){

        event.preventDefault();

        let headers =  new Headers();

        headers.append('Content-Type','application/json');

        console.log(this.usuarios);

        this.http.post("/usuarios",JSON.stringify(this.usuarios),{headers:headers})
        .subscribe(()=> {
            this.usuarios = new Usuarios();
            console.log('Funcionario salvo com sucesso');
        });

       }

    }

Trecho do html que da o erro :

<div class="col-md-4">
<label>Cliente</label>

<select [(ng-model)]="cliente">
        <option *ng-for="let cliente of clientes" [value]="clientes.razao_social">{{clientes.razao_social}}</option>
    </select>
</div>
solução!

Danilo,

no Angular 2 as propriedades se escrevem diferentes das do AngularJS (acho que vc deve estar acostumado a usar ele).

O certo é apenas *ngFor="" , ou [(ngModel)]="". Lembre-se para o ngModel funcionar tem que importar o módulo dele FormsModule.

Veja se funciona! Abraços

Obrigado,

Agora funcionou.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software