如何在带有Angular 2的Kendo网格中显示和隐藏详细信息行

<!-- 组件的HTML模板 -->
<kendo-grid [data]="gridData">
  <kendo-grid-column field="name" title="Name"></kendo-grid-column>
  <kendo-grid-column field="age" title="Age"></kendo-grid-column>
  <kendo-grid-detail-template let-dataItem>
    <div *ngIf="showDetails">
      <!-- 显示详细信息行的内容 -->
      <p>Additional details: {{ dataItem.details }}</p>
    </div>
  </kendo-grid-detail-template>
</kendo-grid>

<button (click)="toggleDetails()">Toggle Details</button>

// 组件的Typescript文件
import { Component } from '@angular/core';

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.css']
})
export class GridComponent {
  gridData: any[] = [
    { name: 'John', age: 30, details: 'Lorem ipsum dolor sit amet' },
    { name: 'Jane', age: 25, details: 'Consectetur adipiscing elit' },
    { name: 'Bob', age: 40, details: 'Sed do eiusmod tempor incididunt' }
  ];

  showDetails: boolean = false;

  toggleDetails() {
    this.showDetails = !this.showDetails;
  }
}