Question

我试图在使用PrimeNG排序时一次只将一个类（箭头svg）应用于一个列标题，但是我的ng-container中的ngIf状态不起作用。我在排序时将所选字段设置为selectedCol。这是什么问题？

表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>

表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/

仅将自定义模板放在一个标题中（PrimeNG）

1 个答案: