一个元素上不能有多个模板绑定。仅使用一个以 * ("</mat-h​​eader-cell> 为前缀的属性

Question

我遇到以下错误：

ERROR in Can't have multiple template bindings on one element. Use only one attribute prefixed with * ("                                </mat-header-cell>
<mat-cell *matCellDef="let order" class="{{orderColumn.fieldClass}}" [ERROR ->]*ngIf="orderColumn.fieldType == 'date'">{{order[orderColumn.fieldName] | date: globalDateFormat}}</ma")
Can't have multiple template bindings on one element. Use only one attribute prefixed with * ("ateFormat}}</mat-cell><mat-cell *matCellDef="let order" class="{{orderColumn.fieldClass}}" [ERROR ->]*ngIf="orderColumn.fieldType == 'text'">{{order[orderColumn.fieldName]}}</mat-cell>

下面是代码：

<mat-table  #table [dataSource]="dataSource" matSort #sort1="matSort"
    matSortActive="id" matSortDirection="asc" matSortDisableClear>
    <!-- Checkbox Column -->
    <ng-container matColumnDef="row">
        <mat-header-cell *matHeaderCellDef class="mat-column-checkbox">
            Row
        </mat-header-cell>
        <mat-cell *matCellDef="let row" class="mat-column-checkbox">
            1
        </mat-cell>
    </ng-container>
            
    <ng-container *ngFor="let orderColumn of newOrderColumns;" matColumnDef="orderColumn.fieldName">
        <mat-header-cell *matHeaderCellDef mat-sort-header class="{{orderColumn.fieldClass}}">{{orderColumn.fieldLable}}
        </mat-header-cell>
        <mat-cell *matCellDef="let order" class="{{orderColumn.fieldClass}}" *ngIf="orderColumn.fieldType == 'date'">{{order[orderColumn.fieldName] | date: globalDateFormat}}</mat-cell>
        <mat-cell *matCellDef="let order" class="{{orderColumn.fieldClass}}" *ngIf="orderColumn.fieldType == 'text'">{{order[orderColumn.fieldName]}}</mat-cell>
        <mat-cell *matCellDef="let order" class="{{orderColumn.fieldClass}}" *ngIf="orderColumn.fieldType == 'Checkbox'">
            <mat-checkbox (click)="$event.stopPropagation()"
                [checked]="order[orderColumn.fieldName] == 'True'" [color]="'primary'">
            </mat-checkbox>
        </mat-cell>

    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>

请帮我解决这个问题。

Answer 1

您不能在一个元素上拥有多个模板绑定。 *matCellDef 和 *ngIf 是结构指令，不能在 mat-cell 中一起使用。

您可以通过使用 span 或任何其他元素包装元素来构建相同的内容。例如，你可以试试这个：

<ng-container *ngIf="orderColumn.fieldType == 'date'">
    <mat-cell *matCellDef="let order" class="{{orderColumn.fieldClass}}"> 
    {{order[orderColumn.fieldName] | date: globalDateFormat}}</mat-cell>
</ng-container>

https://angular.io/guide/structural-directives