Hide/show 使用 HTML 属性作为 Angular 中的条件的元素

Question

我有一个 ng-template 被重新用作 table headers.

<ng-template
  let-table="table"
  let-column="column"
  let-label="label"
  #tableHeaderTemplate
>
  <th [appSort]="table" sort-order="" [attr.sort-key]="column">
    <div>
      <span>{{ label }}</span>
      <span> (asc) </span>
      <span> (desc) </span>
    </div>
  </th>
</ng-template>

单击 header 列后，table 的数据将被排序。除了基于属性 sort-order.

的列之外，我还需要显示 (asc) 或 (desc)

检查下面我的代码示例：

https://stackblitz.com/edit/angular-ivy-ijcuy3?file=src%2Fapp%2Fapp.component.html

Answer 1

您可以使用 [hidden] 属性来隐藏您的元素并通过指定标识符获取 sort-key 属性的值到你的 table header.

  <th #tableHeader [appSort]="table" sort-order="" [attr.sort-key]="column">
    <div>
      <span>{{ label }}</span>
      <span [hidden]="tableHeader.getAttribute('sort-order') !== 'asc'"> (asc) </span>
      <span [hidden]="tableHeader.getAttribute('sort-order') !== 'desc'"> (desc) </span>
    </div>
  </th>
</ng-template>

Hide/show 使用 HTML 属性作为 Angular 中的条件的元素

Hide/show an element by using HTML attribute as condition in Angular

html

javascript

typescript

angular-directive

angular