无法在单元格渲染器中使用 ngIf

Question

我正在尝试显示或隐藏按钮，具体取决于自定义单元格渲染器中的各种条件。

这是我的渲染器模板：

<div class="btn-toolbar" style="justify-content: flex-start; display: flex;">
    <button (click)="editStage()" type="button" class="btn-xs btn btn-primary btn-default btn-space"><span class="fas fa-edit"></span></button>
    <button (click)="gotoSteps()" type="button" class="btn-xs btn btn-primary btn-default btn-space"><span class="fas fa-code-branch"></span></button>
    <button *ngIf="stage.order > 0 && nbrStages > 1" (click)="moveUp()" type="button" class="btn-xs btn btn-primary btn-default btn-space"><span class="fas fa-arrow-up"></span></button>
    <button *ngIf="orderPlusOne < nbrStages && nbrStages > 1" (click)="moveDown()" type="button" class="btn-xs btn btn-primary btn-default btn-space"><span class="fas fa-arrow-down"></span></button>
   <button (click)="deleteStage()" type="button" class="btn-xs btn btn-primary btn-default btn-space"><span class="fa fa-trash-alt"></span></button>
</div>

这是组件代码

@Component({
    selector: 'app-workflow-stage-buttons',
    templateUrl: './workflow-stage-buttons.component.html',
    styleUrls: ['./workflow-stage-buttons.component.css']
})
/** workflow-stage-buttons component*/
export class WorkflowStageButtonsComponent implements ICellRendererAngularComp {
    /** workflow-stage-buttons ctor */
    constructor() {

    }

    params: any;
    stage: WorkflowStage;
    nbrStages: number;
    orderPlusOne: number;
    

    refresh(params: any): boolean {
        return false;
    }

    agInit(params: import("ag-grid-community").ICellRendererParams): void {
        this.params = params;
        this.stage = <WorkflowStage>this.params.data;
        this.nbrStages = this.params.api.getRenderedNodes().length;
        this.orderPlusOne = this.stage.order + 1;
    }

    afterGuiAttached?(params?: import("ag-grid-community").IAfterGuiAttachedParams): void {

    }
}

渲染单元格时出现以下错误：

Can't bind to 'ngIf' since it isn't a known property of 'button'.

在单元格渲染器逻辑之外，我可以在应用程序中其他任何位置的按钮上执行 ngIf。在单元格渲染器的上下文中似乎没有正确加载某些内容。

我试过在模块的声明中添加 WorkflowStageButtonsComponent 并在模块的导入中添加 CommonModule 但没有成功。

有什么想法吗？

编辑：我正在使用 ag-grid-angular@23.2.1

Answer 1

从提供组件的模块导入CommonModule。

@NgModule({
    imports: [CommonModule], // <- importing CommonModule
    declarations: [WorkflowStageButtonsComponent]
    ...
}) 
export class MyComponentModule {} // This is the module where you define your component

无法在单元格渲染器中使用 ngIf

Cannot use ngIf in cell renderer

ag-grid

angular

angular9