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

标签 angular ag-grid angular9

我正在尝试根据自定义单元格渲染器中的各种条件来显示或隐藏按钮。
这是我的渲染器的模板:

<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

最佳答案

进口 CommonModule从提供您的组件的模块。

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

关于angular - 无法在单元格渲染器中使用 ngIf,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63120945/

相关文章:

json - 空注入(inject)器错误 : No provider for JwtHelperService

angular - 等待直到第二个 Observable 发出

javascript - 修改 Angular 网格组件格式导出的列

javascript - 如何在 Vue.js 中将驼峰式大小写转换为正确大小写?

angular - 从 ag-grid 列获取复选框值

Angular 9 和 Storybook : Add @angular/localize/init polyfill

javascript - 在 Angular app.component.ts 中使用 jQuery 代码

angular - createUrlTree 忽略 "useHash: true"RouterModule 配置

meteor - 提供 '--isolatedModules' 标志时无法编译 namespace

html - 如何在 angular2/material 上将 mat-cell 内容与图标对齐?