跨度元素上的动态CSS类-角度7

Question

我在ngx数据表中有一个span元素。我想根据该值动态更改css类。

这是我的html代码：

<ngx-datatable #orderinvoice class="bootstrap" [rows]="invoiceSource" [headerHeight]="50" [footerHeight]="50"
            [rowHeight]="'45'" [scrollbarH]="true" [columnMode]="'force'" [limit]="limit"
            [sorts]="[{prop: 'sNo', dir: 'asc'}]">
            <ngx-datatable-column *ngFor="let column of displayColumns" [name]="column.name">
                <ng-template let-column="column" ngx-datatable-header-template>
                    <span>{{column.name}}</span>
                </ng-template>
                <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
                    <span [ngClass]="{'label label-primary': row[column.value] === 'Complete', 'label label-warning':row[column.value] === 'Processing' }"
                    *ngIf="column.name !== 'Actions'">{{row[column.value]}}</span>
                    <span *ngIf="column.name === 'Actions'">
                        <button class="btn btn-success mr-1 btn-fab" placement="top"
                            data-controls-modal="custom-modal-2" data-toggle="modal" data-backdrop="static"
                            data-keyboard="false" ngbTooltip="View" (click)="SerachInvoice(row , 'custom-modal-2')">
                            <i class="ft-eye"></i>
                        </button>
                        <button class="btn btn-primary mr-1 btn-fab" placement="top" ngbTooltip="Edit"
                        [disabled]="financeYear"   (click)="edit(row)">
                            <i class="ft-edit"></i>
                        </button>
                        <button class="btn btn-warning mr-1 btn-fab" placement="top" ngbTooltip="Print"
                            (click)="SerachInvoice(row,'printSection')">
                            <i class="fa fa-paper-plane-o"></i>
                        </button>
                    </span>
                </ng-template>
            </ngx-datatable-column>
        </ngx-datatable>

以上，我需要根据条件申请课程

 <span [ngClass]="{'label label-primary': row[column.value] === 'Complete', 'label label-warning': row[column.value] === 'Processing' }"

听课结果无法获得，您能告诉我是什么原因吗？

bellow是引导程序类

Answer 1

似乎已从label更改为badge

文档

https://getbootstrap.com/docs/4.4/components/badge/

Hack演示

https://stackblitz.com/edit/angular-ivy-3keqr9