angular6中如何根据下拉选择显示列箭头图标？

Question

Kindly see the below picture, there is a drop-down button called sort where all the headers are there.if i select any of the header it should display up and down arrow.now its displaying in all the headers.

<th abs-table-header [sortable]="true" [sortableContent]="HeaderData[1].value">{{HeaderData[1].text}}</th>
<th abs-table-header [sortable]="true" [sortableContent]="HeaderData[4].value">{{HeaderData[4].text}}</th>
<th abs-table-header [sortable]="true" [sortableContent]="HeaderData[3].value">{{HeaderData[3].text}}</th>             
<th abs-table-header [sortable]="true" [sortableContent]="HeaderData[5].value">{{HeaderData[5].text}}</th>

Here [sortable]="true" gives me both up and down arrow icon.so how can show that icon based on selection instead of displaying at all headers.

Answer 1

您可以根据下拉列表的值将 <th> 替换为 ngIf。

<th *ngIf="sortSelectValue != HeaderData[1].text" abs-table-header>{{HeaderData[1].text}}</th>
<th *ngIf="sortSelectValue == HeaderData[1].text" abs-table-header [sortable]="true" [sortableContent]="HeaderData[1].value">{{HeaderData[1].text}}</th>