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

Dúvida sobre a divisão do grid

Bom dia! Gostaria de saber como eu faria essa divisão da grid sem ser através do data binding... Como segue o meu exemplo. Eu tentei seguir um pouco parecido com o da aula, mas não consegui... e acabei retirando.

<div class="row">
    <div class="col-lg-4 col-md-6 col-sm-12">
        <div *ngFor="let departamento of buscaDepartamentoView" class="card project_widget">
            <div class="pw_img">
                <img class="img-fluid" src="../assets/images/cardiologia.jpg" alt="About the image">
            </div>
            <div class="pw_content">
                <div class="pw_header">
                    <h6>{{departamento.nome}}</h6>
                    <ul class="list-unstyled team-info margin-0 p-t-15">
                        <li class="m-r-15"><small>Equipe</small></li>
                        <li><img src="../assets/images/dr2.jpg" data-toggle="tooltip" data-placement="top" title="" alt="Avatar" data-original-title="Dr. Avatar"></li>
                        <li><img src="../assets/images/dr3.jpg" data-toggle="tooltip" data-placement="top" title="" alt="Avatar" data-original-title="Dr. Avatar"></li>
                        <li><a href="javascript:void(0);" title="Add Member"><i class="fa fa-plus-circle"></i></a></li>
                    </ul>
                </div>
                <div class="pw_meta">
                    <p>{{departamento.descricao}}</p>
                    <a href="depa-more.html" class="btn btn-outline-primary">Mais</a>
                </div>
            </div>
        </div>
    </div>
</div>

export class ListaDepartamentoComponente implements OnInit{

buscaDepartamentoView: DepartamentoView[] = [];

constructor(
    private listaDepartamentoServico : ListaDepartamentoServico
){}

ngOnInit(){
    this.buscarDepartamento();
}

public buscarDepartamento() : void {
    this.listaDepartamentoServico.buscarDepartamento()
        .subscribe(departamentoAPI => {
            // console.log("busca da API do subscribe: ",departamentoAPI);
            this.buscaDepartamentoView = [];

            departamentoAPI.forEach(departamento => {
                this.buscaDepartamentoView.push({
                    departamento_id: departamento.departamento_id,
                    empresa_id: departamento.empresa_id,
                    nome: departamento.nome,
                    descricao: departamento.descricao,
                    excluido: departamento.excluido
                })
            })
        })
}

@silenciadorRequisicao()
removerDepartamento() : void {

    let id = this.buscaDepartamentoView[0].departamento_id;
    this.listaDepartamentoServico.removerDepartamento(id)
        .subscribe(retornoAPI => 
            console.log("removido com sucesso! ",retornoAPI),
            err => console.log(err))
}

}

2 respostas

Oi! Deu algum erro? Se não deu erro posta o html de saída também para analisarmos.

solução!

Eu acabei conseguindo resolver...

...
<div *ngFor="let departamento of buscaDepartamentoView" class="col-lg-4 col-md-6 col-sm-12">
    <div  class="card project_widget">
    ...
    </div>
</div>

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