Angular2 以编程方式在 table 列中设置属性

Question

我正在使用 primeng2，我想设置冻结列

我正在从 JSON 形式的 API 中检索列

colheaders:any[] = [];

getColumnheaders(){
   this.bookService.getColumns()
     .subscribe(
      res=>{
       this.colheaders = res
       }
     )
 }

在html我有

<p-dataTable [value]="cars" scrollable="true" frozenWidth="1200px" unfrozenWidth="600px" [style]="{'margin-top':'30px'}">

     <p-column sortable="true" *ngFor="let col of colheaders" [field]="col.field" [header]="col.header"
               [frozen]="col.frozen"></p-column>


 </p-dataTable>

上面的 p 列在将其值设置为 false 时失败

在快速谷歌搜索中，我发现我不需要设置 frozen 的值，无论是真还是假

所以对于冻结的列，我应该有类似

的东西

   <p-column sortable="true"  [frozen]="true"></p-column>

解冻的列应该有

       <p-column sortable="true"></p-column>  //no frozen property

那我该怎么做呢

所以正常来说应该是这样的

 <p-column sortable="true" *ngFor="let col of colheaders"
               * *ngIf="(col.frozen)" //stuck on how to go on ></p-column>

Answer 1

将 <p-column> 标签包装到没有任何 DOM 表示的 ng-container 中，然后在其中移动 ngFor。您可以将 ngIf 保留在 p-column:

<p-dataTable [value]="cars" scrollable="true" frozenWidth="1200px" unfrozenWidth="600px" [style]="{'margin-top':'30px'}">
   <ng-container *ngFor="let col of colheaders"> 
       <p-column sortable="true" [field]="col.field" [header]="col.header"
               *ngIf="col.frozen" [frozen]="true"></p-column>
       <p-column sortable="true" [field]="col.field" [header]="col.header"
               *ngIf="!col.frozen"></p-column>
    </ng-container>

</p-dataTable>

Angular2 以编程方式在 table 列中设置属性

Angular2 setting property in a table column programmatically

typescript

angular2-template

angular

Angular2 以编程方式在 table 列中设置 属性

Angular2 setting property in a table column programmatically

typescript

angular2-template

angular

Angular2 以编程方式在 table 列中设置属性