时间戳

首页 > 解决方案 > 如何获取组件 HTML 中的属性值？

angular - 如何获取组件 HTML 中的属性值？

问题描述

我有一个表格，点击时我正在排序。我附加了指令，我正在动态更改data-order="desc" 点击时的属性，因此它可以是asc或desc。它在表头单击时更改。

  <th scope="col" [appSort]="dataSource$" (sortObservableEmitter)="test($event)" data-order="desc" data-name="firstname">first name
       
 </th>

现在我想在我的桌子上显示箭头 - 当它上升时我想显示向上箭头字体真棒图标。何时data-order更改为desc我想显示向下箭头的字体图标。

但是当我尝试例如

 <th scope="col" [appSort]="dataSource$" (sortObservableEmitter)="test($event)" data-order="desc" data-name="firstname">first name
        <i *ngIf="data-order == 'asc'" class="fas fa-arrow-up"></i>
 </th>

它不工作。

我怎样才能在我的ngIf指令中获得 的值data-order？

标签： angular

解决方案

在指令中，您可以指示“exportAs”，例如参见此链接

所以如果你的指令是这样的

@Directive({
 selector: '[appSort]',
 exportAs: 'appSort' //<--add this line
})
....
//I imagine you has a variable sortDirection
sortDirection:string=null;

您可以使用模板引用变量访问指令的公共变量（由于 Angular 中的缺陷，所有变量都是公共的）

如果我想象有一个变量被称为例如sortDirection你可以写

<th scope="col" [appSort]="dataSource$" #colFirstName="appSort"...>first name
        <i *ngIf="colFirstName.sortDirection == 'asc'" class="fas fa-arrow-up"></i>
 </th>

注意：取而代之的是两个 *ngIf，我更喜欢使用 ngClass 的方式

        <i [ngClass]="colFirstName.sortDirection=='asc'?'fas fa-arrow-up':
                      colFirstName.sortDirection=='desc'?'fas fa-arrow-down':null"></i>

推荐阅读