Angular Material tab cdkchange undefined index

Question

The problem is when I want to change tab, then it is show an error message:

My code look like this:

 <mat-tab-group mat-align-tabs="start">
      <mat-tab label="tab1">
        <ng-template matTabContent>
          <app-list-table [logic]="this.logic" [groupable]="false"></app-list-table>
        </ng-template>
      </mat-tab>
      <mat-tab label="tab2">
        <ng-template matTabContent>
          <app-list-table [logic]="this.logic" [groupable]="true"></app-list-table>
        </ng-template>
      </mat-tab>
      <mat-tab label="tab3">
        <ng-template matTabContent>
          <app-group-table [logic]="this.logic"></app-group-table>
        </ng-template>
      </mat-tab>
    </mat-tab-group>

On tab change the app-list-table component.ts code:

export class ListTableComponent extends DestroyableBase implements OnInit, AfterViewInit {
 
  displayedColumns: string[] = [
    'open',
    'id',
    'dtCreated',
    'nmUser',
  ];
  dataSource = new MatTableDataSource<any>();
  

  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort: MatSort;

  @Input() logic: ListService;
  @Input() groupable: boolean;

  constructor(private router: Router) {
    super();
  }

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
   }
    
  ngOnInit() {
    this.logic.List$.pipe(takeUntil(this.destroy$)).subscribe((list) => { 
      this.dataSource.data = list;
    });
  }
}

The logic get data for datasource onInit, so when I switch tab it will be loaded. But I'm not sure, this cause the problem.