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

时间:2017-09-11 08:29:48

标签: angular typescript angular2-template

我正在使用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时失败

在一个快速的谷歌搜索中,我发现我不需要设置冻结的值是真还是假

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

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

1 个答案:

答案 0 :(得分: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>