html - example - ngif else angular 5

Angular2: visualización condicional, enlace a la propiedad[oculta] frente a la directiva*ngIf

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cuál es el equivalente de ngShow y ngHide en Angular? 12 respuestas

En Angular2, digamos que quiero mostrar condicionalmente un bloque <div> . ¿Cuál es la diferencia entre las siguientes dos formas?

1. <div [hidden]=isLoaded>Hello World!</div> donde isLoaded es un booleano en el archivo .ts correspondiente.

2. <div *ngIf=isLoaded>Hello World!</div>

Sé que incluso si el <div> no se muestra en la página, 1. todavía tiene el <div> en el DOM mientras que 2. no lo hace. ¿Hay otras diferencias? ¿Cuáles son los pros y los contras de cada uno de ellos?

Answer 1

La diferencia es que *ngIf eliminará el elemento del DOM, mientras que [hidden] realidad juega con el estilo CSS configurando display:none . Sin embargo, el problema con [hidden] es que se puede anular, por lo que se mostrará el div , como en su caso, y se estaría rascando la cabeza por qué no funciona.

Para resumir, *ngIf y [hidden] no son lo mismo en absoluto. El primero elimina un elemento de DOM, mientras que el último alterna la propiedad de display CSS.