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

Angular expression dentro do modal

Bom Dia, estou tentando passar itens de um ngFor feito na TR pra um modal, porem não consigo dentro da minha modal acessar o elemento [x], vou exemplificar:

 <tbody id="myPager">
                <tr *ngFor="let nota of notas">
                    <td>{{ nota["p1"]  }}</td>
                    <td>{{ nota["p2"] }}</td>
                    <td>{{ nota["p3"] }}</td>
                    <td>{{ nota["media"] }}</td>
                    <td> 
                        <a 
                        type="button"
                        class="btn glyphicon glyphicon-plus"
                        data-toggle="modal"
                        data-target="#exampleModal"
                        data-whatever="@mdo"></a>
                    </td>
                </tr>
            </tbody>
        </table>

        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="exampleModalLabel">Informações da Nota</h4>
                     </div>
                    <div class="modal-body">
                        <table>
                            <tr>
                                <td> {{ nota[selecionada }} </td>
                            </tr>
                        </table>

                        <button> Fazer download</button>

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

queria saber como passar o índice selecionado para "nota" e acessar o item que foi selecionado.

16 respostas

Boa tarde!

Quando você faz

 <td>{{ nota["p1"]  }}</td>

É a mesma coisa que fazer {{nota.p1}}, tudo bem? Então, quando você não diz que consegue, qual erro é exibido? Em teoria, se o objeto nota possui a propriedade p1, p2, etc... você é capaz de acessá-lo coma Angular Expression, a não ser que nota não seja um objeto, seja um array. Tem que ver quem é notano seu *ngFor. Precisamos de mais informação.

Nota é um Array de objetos

Então, se notas é um array de arrays, você não pode acessar a propriedade dessa forma nota['p1'], tem que tratar cada item do array como um array, ou seja, nota é um array. Pelo menos foi o que eu entendi com sua resposta.

Você precisará fazer um *ngFor dentro de outro aplicando uma lógica de iteração básica mesmo, nada sofisticado.

Mas, eu tenho como pegar algo pra comprar, por exemplo se p1 for igual a selecionada : imprimo os valores ?

Outra opção é você alterar sua API para retornar uma lista de objetos Nota, em vez de uma lista com cada item sendo um array.

Pode sim, seu problema não é na comparação, seu problema é na hora de iterar nos dados. Você me disse que notas é um array onde cada um dos seus itens é um array. Então, se você dizer nota['p1'] não vai funcionar, porque cada nota é um array e não um objeto.

Esta confuso para mim o motivo dessa estrutura. Será que não dá para você alterar sua API e mandar um array de notas onde cada item é um objeto e não um array? Faz sentido isso em sua app?

Cole a impressão de notas como resposta.

Eu poderia mudar a API sem problemas, quais mudanças seriam necessárias ?

Quando eu peço notas por angular expression:

{{notas}}

Ele me retorna isso:

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

por isso eu achei que isso daria certo:

{{notas['p1'}}

Você quer dizer {{ nota["p1"] }} e não {{notas["p1"] }} né?

Então, parece que cada item de notas é um array com um elemento apenas. Se for assim.... dá para fazer

{{ nota[0].pl }}

Por exemplo. Não é algo que eu consiga resolver para você, é algo que você precisa entender seu modelo. Por que cada item do array de notas é um array com um objeto dentro? Pelo menos foi o que eu inferi aqui com o código que compartilhou.

Vou tentar explicar melhor, acho que não estou me fazendo entender (até eu estou me confundindo). Imagine que:

[
{"p1": 10, "p2": 10, "p3": 10, "media" : 10},
{"p1": 10, "p2": 10, "p3": 10, "media" : 10},
{"p1": 10, "p2": 10, "p3": 10, "media" : 10},
{"p1": 10, "p2": 10, "p3": 10, "media" : 10}
]

Esse é o retorno da minha consulta, então isso seria notas no meu *ngFor então eu uso

nota["p1"]
nota["p2"]
nota["p3"]
nota["media"]

ai na minha modal eu quero que a nota que eu clicar na tabela pela lista seja selecionada e eu tenha todas as informações dela. Ficou mais "entendível" agora ?

Ficou sim. Então não é um array de array como eu havia pensado.

Agora, você faz nota['p1'], por que não faz nota.p1? É mais simples. Bom, independente disso, você teria que ser capaz de acessar notas, iterar em cada item e exibir os dados de cada nota. Pelo o que eu entendi, isso funciona, mas você quer é clicar no item e mostrar ele no seu modal, certo?

Então, você aprendeu aqui no curso a trabalhar com eventos. Sabe a parte que você clica para remover uma foto? Então, você vai criar um método no seu componente que recebe a nota que você deseja exibir no modal. Internamente no método, você vai guardar a nota em uma propriedade chamada notaSelecionada. É essa propriedade que você vai usar no seu modal.

Pegou o conceito?

Você aprende isso na parte 2 do curso, não sei se fez ainda. Aliás, tem muita coisa para aprender ainda no módulo 2.

https://cursos.alura.com.br/course/angular2-parte2/task/21426

Peguei o conceito sim Flávio, obrigado, vou tentar aqui essa dica sua! Com relação ao curso, estou meio atarefado agora, mas assim que der estarei retomando a parte II

Flávio, boa tarde, eu consegui com o método selecionar a nota, mas me ocorreu outra duvida, se eu retornar isso:

selecionado(nota){
        var notaS  = nota;
        return notaS;
    }

O meu HTML já deveria ter acesso dentro da minha modal a {{notaS}} pela angular expression ?

Oi Guilherme!

Vou esclarecer sua dúvida, mas boa parte dela é porque você não terminou os dois cursos de Angular. Sugiro fortemente fazer os dois cursos para ter subsídio para concluir o que esta tentando fazer.

Voltando à pergunta. Você não vai retornar nada no método, vai guardar a nota que recebeu como parâmetro em uma propriedade da classe. Guardando em uma propriedade, você pode acessá-la via data binding em qualquer lugar do template do seu componente.

Você aprenderá isso no curso, a lidar com situações análogas.

Oi Guilherme!

Vou esclarecer sua dúvida, mas boa parte dela é porque você não terminou os dois cursos de Angular (aliás, lembre-se que o pré-requisito é do ES6, porque TypeScript tem tudo que o ES6 tem e adiciona mais coisa e TypeScript é usado pelo Angular). Sugiro fortemente fazer os dois cursos para ter subsídio para concluir o que esta tentando fazer.

Voltando à pergunta. Você não vai retornar nada no método, vai guardar a nota que recebeu como parâmetro em uma propriedade da classe. Guardando em uma propriedade, você pode acessá-la via data binding em qualquer lugar do template do seu componente.

selecionado(nota){
      // supondo que nota é uma propriedade da classe
        this.nota = nota;
    }

Você aprenderá isso no curso, a lidar com situações análogas.

solução!

Obrigado Flávio, eu estava me esquecendo de colocar this,variavale = nota quando fiz isso funcionou, vou terminar a segunda parte ainda essa semana. Obrigado novamente.

Que boa notícia! Então, vai fundo no Angular, pois a trilha é grande!

Sucesso e bom estudo Guilherme!