使用元素名称将属性绑定到元素的子元素Angular 5

Question

我正在使用Angular 5构建一个应用程序。我陷入了需要将属性绑定到变量（元素名称）的位置。下面提供的代码是可行的，但我确信这不是正确的方法，还有另一种方法。

案例：父容器内有箭头填充（.arrow-fill）和箭头边框（.arrow-border）。点击容器后，我需要根据特定条件隐藏/显示箭头。

现在，我使用'＃'为父级命名，并将其传递给typescript中创建的方法。并根据条件，为元素（名称）分配新属性。 下面是我所做的示例代码。有这样的多个标签，它们是硬编码的，不使用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 */ }

这里有没有其他办法，正确的方法。