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

Há realmente a necessidade de criar um pipe para mostrar o primeiro autor?

Eu coloquei assim no template e funcionou pra mim:

 <p class="resultado">{{ livro.authors ? livro.authors[0] : 'Não identificado' | slice: 0:20 }}</p>

Isso é má prática? Sempre fico com essa dúvida...

2 respostas
solução!

Olá Emanoel, tudo bem?

Primeiramente, achei super legal que você tenha implementado a solução de uma forma diferente e compartilhado conosco. Parabéns pela iniciativa!

Fiz um teste com a sua implementação e apenas mudei o pipe slice para o pipe uppercase para ficar mais fácil de te mostrar um ponto importante:

    <p class="resultado">{{ livro.authors ? livro.authors[0] : 'Não identificado' | uppercase }}</p>

Fiz uma busca pelo termo Alô (que traz alguns livros sem autoria), veja o resultado:

Aplicação Buscante - buscador de livros com o campo de busca preenchido pelo termo Alô e três cards de livros abaixo, com os resultados correspondentes ao termo da busca.

Perceba que o pipe só foi aplicado para a segunda opção do ternário ('Não identificado), deixando o termo com as letras maiúsculas. Com relação à primeira opção (livro.authors[0]), nada aconteceu. Esse comportamento é o mesmo para qualquer pipe, usei o uppercase porque fica mais fácil de visualizar.

Isso ocorre porque o operador pipe tem precedência maior que o operador ternário, o que significa que:

{{ livro.authors ? livro.authors[0] : 'Não identificado' | uppercase }}

é analisado como:

{{ livro.authors ? livro.authors[0] : ('Não identificado' | uppercase) }}

Caso você queira que o pipe seja aplicado ao resultado de um ternário, coloque a expressão inteira entre parênteses, assim:

{{ (livro.authors ? livro.authors[0] : 'Não identificado') | uppercase }}

Veja o resultado agora:

Aplicação Buscante - buscador de livros com o campo de busca preenchido pelo termo Alô e três cards de livros abaixo, com os resultados correspondentes ao termo da busca

Na minha opinião, ao utilizar o pipe, o código html fica mais legível e fácil de dar manutenção, além do que você pode reutilizá-lo na aplicação.

Caso você não queira mais a primeira pessoa da autoria e sim a segunda, vai ter que modificar o template de todos os arquivos onde tiver essa lógica. Imagina numa grande aplicação? Com o pipe, você só modificaria um arquivo e a mudança seria refletida em todos os locais onde ele estivesse sendo usado.

Mas você pode sim usar expressões dentro das interpolações, acho esse um recurso muito interessante e, caso vá usar ternários e pipes juntos, lembre-se de tomar esse cuidado.

Espero ter ajudado! Bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado. ✓

Pois é, na minha solução acabei ignorando um hipotético contexto de uma grande aplicação e na manutenção. Para esse projeto funciona, para outros maiores, realmente, não é o ideal. Obrigado!