仅将自定义模板放入一个标头(Primeng)

Question

我试图使用Primeng进行排序时一次将类（箭头SVG）应用于一个列标题，但是我的NGIF状态在我的NG-Container中不起作用。我将所选字段设置为SelectedCol。这里有什么问题？

table-layout.component.html

<p-dataTable 
[value]="results" 
[paginator]="true" 
[rows]=6 
class="ds-u-sans ds-c-table" 
(onSort)="handleSorting($event)"
>
  <p-column 
  *ngFor="let col of cols" 
  [field]="col.field" 
  [header]="col.header" 
  [sortable]="col.sortable" 
  [filter]="col.filter"
  >
    <ng-container *ngIf="col.header === selectedCol">
      <ng-template pTemplate="header">
        <div [ngClass]="sorted ? 'up' : 'down'"></div>
      </ng-template>
    </ng-container>
  </p-column>
</p-dataTable>

table-layout.component.ts

import { BrowserModule } from '@angular/platform-browser'
import { Component, OnInit, NgModule, ViewEncapsulation } from '@angular/core'
import { HttpClient } from '@angular/common/http'
import { cols } from './cols'
@Component({
  selector: 'app-table-layout',
  templateUrl: './table-layout.component.html',
  styleUrls: ['./table-layout.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class TableLayoutComponent implements OnInit {
  ROOT_URL: string = 'https://jsonplaceholder.typicode.com/users'
  results: any[]
  sorted: boolean = false;
  cols: any[]
  selectedCol: string
  constructor(private http: HttpClient) { }
  ngOnInit() {
    this.getData();
    this.cols = cols
  }
  getData() {
    this.http.get<any[]>(this.ROOT_URL).subscribe(data => this.results = data)
  }
  handleSorting(event) {
    this.sorted = !this.sorted
    this.selectedCol = event.field
  }
}

cols.ts

export const cols = [
    { 
        field: 'id', 
        header: 'ID', 
        sortable: true 
    },
    { 
        field: 'name', 
        header: 'Name', 
        sortable: true, 
        filter: true 
    },
    { 
        field: 'username', 
        header: 'Username', 
        sortable: true, 
        filter: true 
    },
    { 
        field: 'address.zipcode', 
        header: 'Zipcode', 
        sortable: true, 
        filter: true 
    }
  ]

Answer 1

  <ng-template let-col pTemplate="header" > 
    <div [ngClass]="col.field === selectedCol ? 'up' : 'down'">
        {{col.header}}
    </div>
  </ng-template>

尝试一下。Stackblitz：https：//angular-9khpho.stackblitz.io/