Question

我有一个网格，我想从.ts文件发送类条件。我可以使用下面的代码myClassCondition = 5 < 6 ? 'bg-red' : null;实现此目的。但是，我想像下面的“ col”和“ rowData”一样。由于.ts文件中没有“ col”和“ rowData”，给了我编译错误。我该如何实现？

<ng-template pTemplate="body" let-rowData>
  <tr>
    <td *ngFor="let col of myColumns" class="ui-resizable-column">
      <span [ngClass]="myClassCondition"> {{rowData[col.field]}}</span>
    </td>
  </tr>
</ng-template>

这很好用。

myClassCondition = 5 < 6 ? 'bg-red' : null;

但是我想要这样。

myClassCondition = col.field == 'studentAge' && rowData.[col.field] < 6 ? 'bg-red' : null;

我尝试了这个，但是还是没用。

myClassCondition : string = "col.field == 'studentAge' && rowData.[col.field] < 6 ? 'bg-red' : null";

Answer 1

在您的ts文件中，使用函数代替了决定类的变量

getClassCondition(col, rowData)
{
 return col.field == 'studentAge' && rowData.[col.field] < 6 ? 'bg-red' : null;
}

并在您的模板中，调用该函数以获取类，

<ng-template pTemplate="body" let-rowData>
  <tr>
    <td *ngFor="let col of myColumns" class="ui-resizable-column">
      <span [ngClass]="getClassCondition(col, rowData)"> {{rowData[col.field]}}</span>
    </td>
  </tr>
</ng-template>

由于您有一个名为app-grid的单独组件，并且定义类名的逻辑取决于托管组件，因此请执行以下操作：在app-grid组件的ts文件中，定义输入以获取可以返回所需值的函数，

@Input() logic: any;

并将getClassCondition组件中的app-grid函数更改为以下内容，

getClassCondition(col, rowData)
{
 return logic(col,rowData);
}

并在托管组件中，定义用于定义类的实际功能。在该组件的ts文件中定义它，

logic = function(col,rowData){
 return col.field == 'studentAge' && rowData.[col.field] < 6 ? 'bg-red' : null; // change this implementation in different components
}

然后在该组件的模板文件中，将该函数作为输入发送

<app-grid [logic]="logic"></app-grid>

Answer 2

<ng-template pTemplate="body" let-rowData>
  <tr>
    <td *ngFor="let col of myColumns" class="ui-resizable-column">
      <span [ngClass]="myClassCondition(rowData,col.field)"> {{rowData[col.field]}}</span>
    </td>
  </tr>
</ng-template>

myClassCondition(rowData,col_field) {
    if(check your condition){
        return 'bg-red';
     }
}

从.ts到.html中以角度发送动态变量

2 个答案: