Kendo网格角度隐藏表格单元格

Question

我正在使用有角度的剑道网格。我正在尝试使用 *ngIf 从剑道网格中隐藏/删除整个单元格，但只有单元格内的内容被隐藏，空单元格被显示。

如何从网格中隐藏总单元格，

这是代码，我用过

<kendo-grid id="antibiotic-result-view" [data]="uniqAntibioticList" [resizable]="false">
<kendo-grid-column field="Expansion" [width]="150">
    <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
        <div class="antibiotic-heading">{{"Antibiotic" | translate}}
            <mat-checkbox type="checkbox" [ngModel]="allCompleted" disabled="true"></mat-checkbox>
        </div>
    </ng-template>
    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
        <div *ngIf="dataItem.IsSuppressed">
            <span>{{ dataItem.Expansion }}</span>
            <mat-checkbox type="checkbox" [ngModel]="dataItem.IsSuppressed" disabled="true"></mat-checkbox>
        </div>
    </ng-template>
</kendo-grid-column>

过去两天我一直在尝试，有人可以帮助我吗？

Answer 1

我不确定您想要实现什么，但为了简单地解决这个问题，我们可以通过根据所需的条件过滤行来删除该行，但请注意，我们应该有选择地对更改事件进行此过滤，如果我们直接在

[data]

属性上调用过滤器会导致性能问题。请查看以下工作示例供您参考和分析！

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
        <kendo-grid id="antibiotic-result-view" [data]="gridDataOnlyNoSuppressed" [resizable]="false" [trackBy]="trackBy">
          <kendo-grid-column field="ProductName" [width]="150">
            <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
              <div class="antibiotic-heading">Antibiotic
                <input type="checkbox" kendoCheckBox type="checkbox" [ngModel]="allCompleted" disabled="true"/>
              </div>
            </ng-template>
            <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                <span>{{ dataItem | json }}</span>
                <input type="checkbox" #checkbox kendoCheckBox type="checkbox" [ngModel]="dataItem.IsSuppressed" [disabled]="dataItem.IsSuppressed" (input)="change(dataItem, checkbox)"/>
            </ng-template>
          </kendo-grid-column>
        </kendo-grid>
    `,
})
export class AppComponent {
  allCompleted = false;
  gridDataOnlyNoSuppressed = [];
  public gridData: any[] = [
    {
      ProductID: 1,
      ProductName: 'Chai',
      UnitPrice: 18,
      Category: {
        CategoryID: 1,
        CategoryName: 'Beverages',
      },
      IsSuppressed: false,
    },
    {
      ProductID: 2,
      ProductName: 'Chang',
      UnitPrice: 19,
      Category: {
        CategoryID: 1,
        CategoryName: 'Beverages',
      },
      IsSuppressed: false,
    },
    {
      ProductID: 3,
      ProductName: 'Aniseed Syrup',
      UnitPrice: 10,
      Category: {
        CategoryID: 2,
        CategoryName: 'Condiments',
      },
      IsSuppressed: false,
    },
  ];

  ngOnInit() {
    this.filterRows();
  }

  trackBy(index, item) {
    return item.productID;
  }

  change(dataItem, checkbox: any) {
    dataItem.IsSuppressed = !dataItem.IsSuppressed;
    this.filterRows();
    setTimeout(() => {
      checkbox.checked = false;
    });
  }

  filterRows() {
    this.gridDataOnlyNoSuppressed = this.gridData.filter(
      (x) => !x.IsSuppressed
    );
  }
}

Stackblitz 演示