Как мне оценить выражение Typescript без использования NgIf в HTML? - PullRequest
Новая
       2

Как мне оценить выражение Typescript без использования NgIf в HTML?

0 голосов
/ 03 марта 2020

Я много искал ответа, все, с чем я продолжаю прибегать к помощи UO, - это использование NgIf, и я НЕ хочу его использовать, вместо этого
Я пытаюсь использовать [hidden]. Поэтому, пожалуйста, не помечайте это как дубликат или «неясно», это очень ясно (я упоминаю об этом из-за предыдущего неприятного опыта с некоторыми «модераторами»).

Я пытался заставить эту работу: [hidden]="vehicle.body==='sedan' "

Это действительно? если это не так, может кто-нибудь дать мне указание на правильный способ заставить его работать?

Я пытался сделать переменную aT / F в компоненте TS, потому что я точно знаю, что что-то вроде [hidden]="isHidden" работает , но я хочу оценить выражение прямо в части HTML.

Спасибо

Ответы [ 3 ]

1 голос
/ 03 марта 2020

Существует два способа скрытия элемента на основе условий. Свойство hide скрывает элемент от пользовательского представления, но все еще присутствует в dom. 

  <input class="txt" type="text" [hidden]="isHidden">

* NgIf скрывает как представление, так и dom. следовательно, это лучший вариант, но он полностью зависит от вашего использования. 

   <input class="txt" type="text *ngIf="!isHidden">

Скрытие и отображение элемента после рендеринга - это хорошо. Но с Angular мы можем создавать многофункциональные приложения, которые могут использовать и некоторые компоненты. много ресурсов. И хотя компонент скрыт, он будет присоединен к своему элементу DOM. Он будет продолжать слушать события. Angular продолжать проверять изменения, связанные с привязками данных. Поведение компонента все еще существует, даже если оно скрыто.

Компонент и его дочерние компоненты будут использовать ресурсы ie. Объем памяти может быть высоким, что приводит к снижению производительности. Поэтому лучше добавлять или удалять элементы к элементу компонента в HTML DOM, а не скрывать или показывать их.

1 голос
/ 03 марта 2020

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

Есть два способа скрыть пользовательский интерфейс,

1) * ngIf -> Это удаляет элемент из DOM, - Safe

2) hidden / ng-class -> Он просто скрывает элемент из DOM, поэтому злоумышленник все еще может видеть ваши данные / пользовательский интерфейс, просто выполнив это дисплей: flex; - небезопасно

Выбор за вами.

Счастливое кодирование!

1 голос
/ 03 марта 2020

Да, это действительно, хотя я бы предложил удалить постороннее пространство в конце. Другое соображение - к какому элементу вы применяете скрытый атрибут. например, это хорошо для элементов div, кнопок, но стоит проверить, если у вас возникла проблема, характерная только для определенного типа элемента управления.

Примечание: я знаю, что вы сказали, что не хотите использовать * ngIf, но Любопытно, почему. Если это типичная проблема, когда вы не хотите влиять на макет, вы можете использовать структурную директиву ng-container, поскольку она не влияет на DOM. и лучше для добавления условного отображения для целых разделов и любого элемента управления, например 

<ng-container *ngIf="condition">content
</ng-container>
...