Angular 8表行渲染指令问题

Question

我有一个呈现数据的表。在每个列标题中，我添加了一个“ sortableHeaderName”指令。该指令的目的是向呈现表格的组件触发sort事件，以便基于sortDirection（'asc'，'desc'，''（（数据点击三次））。我认为问题是指令无法实现被点击的元素，它无法在第三次点击时呈现原始数据。如果我对所有表数据手动使用相同的指令代码，而不是使用循环，则一切运行良好（第三次单击标题名称将呈现数据的原始顺序，并且删除了字体真棒图标）

----------- HTML行呈现-----------------------

<tr>

    <th scope="col" sortableHeaderName="rowNum" (sort)="onSort($event)">

      #

    </th>

    <th *ngFor="let dispute of allDisputes[0] | keyvalue;" scope="col"

        sortableHeaderName={{disputeTableHeaderDetails[dispute.key]?.sortHeaderName}}

        (sort)="onSort($event)"

        id="{{dispute.key}}"

    >

      <i *ngIf="disputeTableHeaderDetails[dispute.key]?.sortHeaderName === currentColName" [ngClass]=className></i>

      <span copyClipboard>{{disputeTableHeaderDetails[dispute.key]?.colName}}</span>

    </th>

  </tr>




//-----------directive code-----------------




import {
    Directive,
    Input,
    Output,
    EventEmitter,
    ElementRef
   } from '@angular/core';



   import {
    SortDirection
   } from 'src/app/constants/AppConstants';

   import {
    SortEvent
   } from '../models/sort-event.model';



   @Directive({

    selector: 'th[sortableHeaderName]',

    host: {

     '(click)': 'performRotation()'

    }

   })

   export class SortableHeaderDirective {

    rotate: {
     [key: string]: SortDirection
    } = {
     asc: 'desc',
     desc: '',
     '': 'asc'
    };

    @Input() sortableHeaderName: string;

    // @Input() direction: SortDirection = '';

    direction: SortDirection = '';

    @Output() sort = new EventEmitter < SortEvent > ();

    currDirection: string = null;

    clickCount = 0;



    constructor() {

    }



    performRotation() {

     // this.direction = this.rotate[this.direction];

     // if (this.currDirection) {

     //   this.currDirection = this.rotate[this.currDirection];

     // } else {

     //   this.currDirection = this.rotate.desc;

     // }

     this.clickCount += 1;



     switch (this.clickCount) {

      case 1:

       this.currDirection = 'asc';

       break;



      case 2:

       this.currDirection = 'desc';

       break;



      case 3:

       this.currDirection = '';

       break;



      default:

       this.clickCount = 0;

       break;

     }



     // this.currDirection = this.currDirection ? this.rotate[this.currDirection] : this.rotate[this.direction];



     this.sort.emit({
      column: this.sortableHeaderName,
      direction: this.currDirection
     });

    }

   }