Свойство привязки к дочернему элементу, используя имя элемента | Угловой 5

Question

Я создаю приложение, используя Angular 5. Я застрял в позиции, где мне нужно привязать свойство к переменной (имя элемента).Приведенный ниже код работает, но я уверен, что это неправильный способ сделать это, и есть другой способ.

Случай: заполнение стрелки (.arrow-fill) и граница стрелки (.arrowграница) внутри родительского контейнера.При щелчке контейнера мне нужно скрыть / показать стрелки, основанные на определенных условиях.

На данный момент я дал имя родителю, используя '#', и передал его методу, созданному в машинописи.И там на основании условия присваивается новое свойство элементу (имя).Ниже приведен пример кода того, что я сделал.Есть несколько таких вкладок, и они жестко запрограммированы и не используют ngFor для их генерации.

<li #liTab2 (click)="checkAndDisplay(liTab1)">
<div class="arr arrow-border" *ngIf="liTab.showBorder"></div>
<div class="arr arrow-fill" *ngIf="!liTab.showBorder"></div>
</li>

<li #liTab2 (click)="checkAndDisplay(liTab2)">
<div class="arr arrow-border" *ngIf="liTab2.showBorder"></div>
<div class="arr arrow-fill" *ngIf="!liTab2.showBorder"></div>
</li>

Теперь в машинописной функции есть функция:
checkAndDisplay(elem) { elem.nativeElement.showBorder = !elem.nativeElement.showBorder; /*some other functions are also taking place here */ }

Есть ли другой способ, правильный способ сделать это здесь.

Answer 1

<ul>
    <li (click)="showBorder = !showBorder">
        <div class="arr arrow-border" *ngIf="showBorder">Div 1</div>
        <div class="arr arrow-fill" *ngIf="!showBorder">Div 2</div>
    </li>
</ul>

Это еще один способ сделать это!