如何使用 NGIF 将元素显示到动态数据表的页脚中答案

【问题标题】：How to use NGIF for to display element into footer in dynamic datatable如何使用 NGIF 将元素显示到动态数据表的页脚中
【发布时间】：2020-05-22 06:54:07
【问题描述】：

如果我在特定列中，我需要在行数据表中显示页脚元素，我知道在正常情况下如何执行此操作，但在这里我使用编程行定义（我应该将其用于分组）

所以我已经尝试了该代码：

模板：

<mat-table [dataSource]="dataSource" class="mat-elevation-z8">

            <ng-container *ngFor="let column of columns; let i = index" matColumnDef="{{ column.field }}">
              <mat-header-cell *matHeaderCellDef (click)="SortWith($event,column)">{{ column.field }}


              </mat-header-cell>
            <mat-cell *matCellDef="let row">
                <div >
                    {{ row[column.field] }}
                </div>
            </mat-cell>
            <mat-footer-cell *matFooterCellDef *ngIf="column.field == Category"> <b><font color=red>Total: </font></b></mat-footer-cell> // I need to dispaly this just in column of category

        </ng-container>

              <mat-header-row mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
              <mat-row *matRowDef="let row; columns: displayedColumns;" [className]="row.RemainingQuantities == 0 ? 'red' : 'redBack'"></mat-row>
              <mat-row *matFooterRowDef="displayedColumns; sticky: true"></mat-row>

              <!-- Group header -->
              <ng-container matColumnDef="groupHeader">
                  <mat-cell colspan="999" *matCellDef="let group">
                <mat-icon *ngIf="group.expanded">expand_less</mat-icon>
                <mat-icon *ngIf="!group.expanded">expand_more</mat-icon>
                      <strong>{{groupByColumns[group.level-1]}} = {{group[groupByColumns[group.level-1]]}} ({{group.totalCounts}})</strong>
                </mat-cell>
            </ng-container>

我的组件.ts：

this.columns = [{
      field: 'Category'
    },  {
      field: 'Model'
    },  {
      field: 'Reference'
    },  {
      field: 'Name'
    },  {
      field: 'RemainingQuantities'
    },  {
      field: 'Department.Name'
    },  {
      field: 'Supplier.Name'
    }];
    this.displayedColumns = this.columns.map(column => column.field);
    this.groupByColumns = ['Category'];
 columnsToDisplay: string[] = ['Category', 'Model', 'Reference', 'Name', 'RemainingQuantities', 'Department.Name', 'Supplier.Name'];
   SortedColumns: string[] = [];
    this.service.get_product().subscribe((result : any)=>{
      this.listdata = result;

      this.decompersed = decrypt(result);
      console.log(this.decompersed);
      this.ProductList = this.decompersed;
      this.dataSource.data = this.addGroups(this.ProductList, this.groupByColumns);
      this.dataSource.filterPredicate = this.customFilterPredicate.bind(this);
      this.dataSource.filter = performance.now().toString();

但是我发现了那个错误：

未捕获的错误：模板解析错误：不能有多个模板绑定在一个元素上。仅使用一个以 * (" 为前缀的属性 ]*ngIf="column.field == Category">总计：")：

当我删除 NgIf 时，我发现了结果：

我只需要第一个总标签

【问题讨论】：

在这里创建运行代码。这将有助于解决问题。

标签： angular typescript

【解决方案1】：

解决方案是使用[className]="column.field == 'Category' ? 'nothing' : 'hidetool'"，并且 hidetool 类包含隐藏属性。

【讨论】：