Пользовательский источник данных angular mat-table undefined MatSort

У меня есть мат-таблица с настраиваемым источником данных (который реализует DataSource и возвращает observable на connect), похожий на this.
Я включил поиск, но мой @ViewChild(MatSort, {static: true}) sort: MatSort; по-прежнему не определен.
У меня нет *ngIf, и я также дал некоторые исходные данные своему пользовательскому dataSource, просто чтобы проверить некоторые ответы от здесь, но он все равно не работает:

export class ItemsDataSource implements DataSource<Item>{
    private dummyItem: Item = {};

    private items: Item[] = [this.dummyItem];
    private subject = new BehaviorSubject<Item[]>(this.items);
    readonly items$ = this.subject.asObservable();

    constructor() { 
      this.dummyItem.setName(`first`);
      this.subject.next(this.items);    // Have some initial data
    }

    connect(collectionViewer: CollectionViewer): Observable<Item[]> {
      return this.items$;
    }

    disconnect(collectionViewer: CollectionViewer): void {
      this.subject.complete();
    }

    // This is used by the items service to add streamed items when they become available 
    public add(item: Item) {
      this.items.push(item);
      this.subject.next(this.items);
    }
  }

export class ItemsComponent implements OnInit {
    readonly displayedColumns: string[] = ['name'];
    public dataSource: ItemsDataSource;

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

    @ViewChild(MatSort, {static: true}) set matSort(sort: MatSort) {
      // `sort` is undefined here
      // sort.sortChange.subscribe(() => console.log(`sorting`));
    } 

    constructor(private route: ActivatedRoute, private scanService: ItemsService) {
    }

    ngOnInit() {
      this.route.params.pipe(map(param => param.name)).subscribe(name => {

        // The scan service will create the ItemsDataSource the first time it is requested
        this.dataSource = this.scanService.dataSource(name);

        // `this.sort` is undefined here
        // this.sort.sortChange.subscribe(() => console.log(`sorting`));
      });
    }

    ngAfterViewInit() {
      // `this.sort` is undefined here
      //this.sort.sortChange.subscribe(() => console.log(`sorting`));
    }
  }

<table id="items" mat-table matSort [dataSource]="dataSource" class="mat-elevation-z2">
    <ng-container matColumnDef="name">
        <th mat-header-cell mat-sort-header *matHeaderCellDef> NAME </th>
        <td mat-cell *matCellDef="let item"> {{item.getName()}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Я как бы застрял, есть идеи?