Angular2: условный показ, привязка к свойству [hidden] vs. * ngIf

В Angular2, скажем, я хочу условно отобразить блок <div>. Какая разница между двумя следующими способами.

  1. <div [hidden]=isLoaded>Hello World!</div> где isLoaded является логическим в соответствующем файле .ts.

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

Я знаю, что даже если <div> не отображается на странице, 1. все еще имеет <div> в DOM, а 2. нет. Есть ли другие отличия? Каковы плюсы и минусы каждого из них?

ОТВЕТЫ

Ответ 1

Разница в том, что *ngIf удалит элемент из DOM, а [hidden] фактически играет с стилем CSS, установив display:none. Однако проблема с [hidden] заключается в том, что ее можно переоценить, так что div, как и в вашем случае, будет отображаться, и вы почесываете голову, почему это не работает.

Чтобы подвести итог, *ngIf и [hidden] не совпадают. Первый удаляет элемент из DOM, а последний переключает display свойства CSS.