Angular Просмотр дерева материалов не работает (расширенные данные пусты)

Question

У меня есть прикрепленный файл .ts и шаблон. Мой код работал, и долгое время он внезапно перестал работать. Код примера с сайта материалов angular работает хорошо, и при сравнении рабочего примера и моего кода расширенный массив в моем коде пуст. Не знаю почему. Кто-нибудь может посоветовать, почему он перестал работать.

Я использую вызов API для сбора данных из моего бэкэнда, и он довольно большой (раньше он работал хорошо), я добавил его как константу для тестирования.

Мой машинописный текст контроллер:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from "@angular/router";
import { FlatTreeControl } from '@angular/cdk/tree';
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';

interface TopicNode {
    id:number;
    ks_key: string;
    item_text_display:string;
    item_text_link:string;
    order:number;
    page_id:number;
    children?: TopicNode[];
}

interface ExampleFlatNode {
    expandable: boolean;
    name: string;
    order: number;
    page_id:number;
}

const teststring : TopicNode[] = [
    {
        id: 947, 
        ks_key: "Science_Key_Stage_1", 
        item_text_display: "Working Scientifically", 
        item_text_link: "Working Scientifically", 
        order: 1, 
        page_id: 1, 
        children: [{
                id: 948, 
                ks_key: "Science_Key_Stage_1", 
                item_text_display: "Science", 
                item_text_link: "Science", 
                order: 2, 
                page_id: 510, 
                children: []
            }, 
            {
                id: 949, 
                ks_key: "Science_Key_Stage_1", 
                item_text_display: "Observe", 
                item_text_link: "Observe", 
                order: 2, 
                page_id: 511, 
                children: [{
                    id: 950, 
                    ks_key: "Science_Key_Stage_1", 
                    item_text_display: "Properties", 
                    item_text_link: "Property", 
                    order: 3, 
                    page_id: 390, 
                    children: [{
                        id: 951, 
                        ks_key: "Science_Key_Stage_1", 
                        item_text_display: "Texture", 
                        item_text_link: "Texture", 
                        order: 4, 
                        page_id: 452, 
                        children: []}]
                    }]
                }
                ]}]



@Component({
    selector: 'app-kslist',
    templateUrl: './kslist.component.html',
    styleUrls: ['./kslist.component.scss']
})
export class KslistComponent implements OnInit {

    private _transformer = (node: TopicNode, level: number) => {
        return {
            expandable: !!node.children && node.children.length > 0,
            name: node.item_text_display,
            order: node.order,
            page_id: node.page_id
        };  
    }

    treeControl = new FlatTreeControl<ExampleFlatNode>(node => node.order, node => node.expandable);

    treeFlattener = new MatTreeFlattener(
        this._transformer, node => node.order, node => node.expandable, node => node.children);

    dataSource1 = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);

    constructor(private route: ActivatedRoute, private backendService: BackendService) {
    }

    catagories: any;
    subject: string="";
    title: string = "";


    ngOnInit() {
        this.title = "Test";
        this.dataSource1.data = teststring;
        console.log(this.dataSource1);
    }

    hasChild = (_: number, node: ExampleFlatNode) => node.expandable;
}

и шаблон:

<div class="ksheader">
    <h1>{{title}}</h1>
</div>

        <mat-tree [dataSource]="dataSource1" [treeControl]="treeControl">
          <p>test</p>
          <!-- This is the tree node template for leaf nodes -->
          <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
            <p>test2</p>
            <!-- use a disabled button to provide padding for tree leaf -->
            <button mat-icon-button disabled></button>
            <!-- non parent -->
            <a *ngIf="node.page_id!=1" href="page/{{node.page_id}}">
                {{node.name}}
            </a>
            <div *ngIf="node.page_id==1">
                {{node.name}}
            </div>
          </mat-tree-node>
          <!-- This is the tree node template for expandable nodes -->
          <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
            <button mat-icon-button matTreeNodeToggle
                    [attr.aria-label]="'toggle ' + node.item_text_display">

              <mat-icon class="mat-icon-rtl-mirror">
                {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
              </mat-icon>
            </button>
            <!-- parent -->     
            <a *ngIf="node.page_id!=1" href="page/{{node.page_id}}">
                {{node.name}}
            </a>
            <div *ngIf="node.page_id==1">
                {{node.name}}
            </div>
          </mat-tree-node>
        </mat-tree>

Пожалуйста, кто-нибудь посоветует, сортировка занимает слишком много времени.

Спасибо,