Question

我已使用此模型创建具有扩展行的表：

https://stackblitz.com/edit/angular-material2-expandable-rows-filter-pagination-sorting?file=app%2Fcdk-detail-row.directive.ts

问题在于，如果不单击该行就无法展开或关闭该行。

例如：

当我单击行时，它会在ng-template中展开：

<ng-template #tpl let-element>
    <div class="mat-row detail-row" [@detailExpand] style="overflow: hidden">
       <button type="button" (click)="closeRow()">Close Row</button>
    </div>
</ng-template>

我希望能够通过单击ng-template内的按钮来关闭该行。

希望这不是很困惑。

Answer 1

问题已解决，您可以在这里尝试：https://stackblitz.com/edit/angular-material2-expandable-rows-filter-pagination-sort-7jpsik?file=app%2Ftable-example.ts

更改之处：

cdk-detail-row.directive.ts

添加发射器

31：@Output() toggleChange = new EventEmitter<CdkDetailRowDirective>(); // added

触发切换

47：this.toggleChange.emit(this); // added

table-example.html

绑定切换

39：(toggleChange)="onToggleChange($event)"

添加按钮以关闭点击行

48：<button type="button" (click)="closeRow()">Close Row</button>

table-example.ts

添加变量以跟踪要扩展的行

30：private openedRow: CdkDetailRowDirective

管理cdkDetailRow.expended

43-52：

  onToggleChange(cdkDetailRow: CdkDetailRowDirective) : void {
    if (this.openedRow && this.openedRow.expended) {
      this.openedRow.toggle();      
    }
    this.openedRow = cdkDetailRow.expended ? cdkDetailRow : undefined;
  }

  closeRow() {
    this.onToggleChange(this.openedRow);
  }

使用按钮以编程方式关闭展开的行

1 个答案: