ngIf - еще против двух условий ngIf

Рассмотрим следующий пример кода:

<div *ngIf="condition; else elseBlock">
    <!-- markup here --> 
</div>
<ng-template #elseBlock>
     <div>
         <!-- additional markup here -->
     </div> 
</ng-template>

Другой способ добиться той же функциональности:

<div *ngIf="condition">
    <!-- markup here --> 
</div>
<div *ngIf="!condition">
     <!-- additional markup here -->
</div>

Я хочу знать конкретные причины, по которым из этих двух способов следует использовать и почему?


angular angular2-template angular-ng-if
person Himanshu Arora    schedule 21.06.2017    source источник
comment
Я бы предпочел использовать elseBlock, если разметка ‹-- здесь ---› имеет много строк, скажем, более 10 строк, это также поможет другим узнать, что есть раздел отрицания, который будет отображаться. Если содержимое разметки составляет несколько строк, скажем, менее 10, два ngIf будут в порядке (мое личное предпочтение)   -  person Chandre Gowda    schedule 21.06.2017
comment
Близким избирателям: Нет, это не вопрос мнения. Хотя есть люди, которые верят, что Земля плоская, это не делает вопрос о том, плоская ли Земля, в первую очередь основанным на мнениях.   -  person    schedule 21.06.2017
comment
Я переформулировал этот вопрос так, чтобы он не выводил мнения без каких-либо фактов. Я предполагаю, что сейчас вопрос не спрашивает чьего-либо мнения, а ищет причины для выбора одного из двух путей достижения чего-либо. Я был бы признателен, если бы сейчас проголосовали за то, чтобы открыть, в качестве ответов, представить причины в поддержку первого варианта. @torazaburo Надеюсь, ты согласишься   -  person Himanshu Arora    schedule 22.06.2017
comment
Да, согласен с неблизким настроением. Есть не основанный на мнении ответ на вопрос о том, когда использовать else вместо двух if, когда вы действительно хотите else! Это сводится к вопросу, я видел код, в котором говорилось if (a < 1) foo; if (a >= 1) bar;. Есть ли в этом преимущество перед if (a < 1) foo else bar;? И это преимущество может состоять в том, что использование else позволяет избежать двойного написания условия, что может быть источником ошибок, и СУШИТЬ код, как отмечает пользователь 663031/toazaburo.   -  person ruffin    schedule 26.01.2019

Ответы (2)


arrow_upward
9
arrow_downward

Использование else позволяет избежать двойного написания условия, что может стать источником ошибок, поэтому я бы предпочел использовать его. Вы также можете поместить шаблон else внизу вашего шаблона, если вы того пожелаете, что может облегчить чтение шаблона.

Если вы разворачиваете наблюдаемое с помощью канала async, то написать его намного проще.

<div *ngIf="myItems$ | async as myItems; else noItemsYet">

чем добавить еще один <div *ngIf="!(myitems | async)">, что также заставит Angular создать еще одну внутреннюю подписку.

Те, кто голосует за то, чтобы закрыть этот вопрос как мнение, заблуждаются. Тот факт, что у людей могут быть разные мнения о чем-либо, не означает, что нет обоснованных точек зрения, которые стоит выдвигать.

Если бы использование else было вопросом простого предпочтения, я сомневаюсь, что разработчики Angular отдали бы ему приоритет для Angular 4, как они это сделали.

Как указывает @Ishnark, это также может повлиять на производительность.

person Community    schedule 21.06.2017

arrow_upward
2
arrow_downward

Первое решение лучше. Хотя оба достигают одного и того же, первый чище и проще логически.

Вы выполняете только одну проверку с первым решением. Это хорошее решение, потому что:

  1. Требуется время, чтобы оценить состояние.
  2. Используя else, вам нужно проверить только один раз. Во втором решении вы проверяете, выполняется ли условие (что требует времени), а затем проверяете, выполняется ли не то же условие.
  3. Использование else позволяет выполнить действие в случае, если каким-либо образом не выполняется ни одно из условий.

РЕДАКТИРОВАТЬ: см. ответ @toazaburo, посвященный небезопасности.

person Ishnark    schedule 21.06.2017
comment
Ишнарк и @toazaburo, ваши ответы мне понятны. Особенно тот факт, что наличие else помимо if сразу дает понять, что есть другой шаблон, если эта проверка не пройдена. Кроме того, с точки зрения производительности, если он следует тому же правилу одиночной проверки в случае блока if-else по сравнению с двумя проверками, когда мы используем два оператора if, тогда да, я думаю, следует использовать первый. Теперь еще один вопрос, какой из них я должен отметить как принятый ответ? :-п - person Himanshu Arora; 21.06.2017
comment
Я думаю, что решение @toazaburo больше подходит для вашего случая (я предполагаю, что условие в вашем ngIf относительно простое, поэтому производительность может не быть проблемой). - person Ishnark; 21.06.2017
comment
Это правильно. Тогда принимайте его ответ. Но спасибо и за ваш вклад :) - person Himanshu Arora; 21.06.2017