未调用@angular/cdk/collections DataSource<T>的disconnect方法

import { Component, OnInit, OnDestroy } from '@angular/core';
import { DataSource } from '@angular/cdk/collections';
import { Observable, Subscription } from 'rxjs';

// 定义数据模型
interface MyData {
  id: number;
  name: string;
}

// 自定义数据源
class MyDataSource extends DataSource<MyData> {
  private data: MyData[] = [];
  private dataSubscription: Subscription;

  constructor(private myDataService: MyDataService) {
    super();
  }

  connect(): Observable<MyData[]> {
    this.dataSubscription = this.myDataService.getData().subscribe(data => {
      this.data = data;
    });
    return this.myDataService.getData();
  }

  disconnect(): void {
    if (this.dataSubscription) {
      this.dataSubscription.unsubscribe();
    }
  }
}

@Component({
  selector: 'app-my-component',
  template: `
    <div *ngFor="let item of dataSource.connect() | async">
      {{ item.name }}
    </div>
  `,
})
export class MyComponent implements OnInit, OnDestroy {
  dataSource: MyDataSource;

  constructor(private myDataService: MyDataService) {}

  ngOnInit(): void {
    this.dataSource = new MyDataSource(this.myDataService);
  }

  ngOnDestroy(): void {
    this.dataSource.disconnect();
  }
}