Angular 树<mat-tree></mat-tree>

Question

我有个问题。 我想在 angular 中构建一个结构来列出数据库中的信息。 我想使用，但找不到可以为一棵树使用不同数据类型的示例。 我使用本指南作为指南。

就我而言，我有这个主界面：

export interface Akte {
    AKTENID: number;
    istGeloescht: boolean;
    istAbgelegt: boolean;
    name: string;
    Id: number;
    parentId: number;
    children?: Dokument[];
}

孩子们来自类型Dokument

    DOCID: number;
    ANWID: number;
    MANID: number;
    AKTENID: number;
    PFAD: string;
    Erstelldatum: Date;
    Anderungsdatum: Date;
    Bezeichnung: string;
    Id: number;
    parentId: number;
}

但是 MatTreeFlatener 抛出了一些错误：

S2322：类型 'Dokument[]' 不可分配给类型 'Akte[] | 可观察的<Akte[]>'。 类型“Dokument[]”不可分配给类型“Akte[]”。 “Dokument”类型缺少“Akte”类型的以下属性：istGeloescht、istAbgelegt、名称

那么，如何使用这两个接口创建一个 mat-tree 呢？

编辑：

前端

<div fxLayout="column" fxLayoutGap="32px">
    <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
        <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
            <button mat-icon-button disabled></button>
            {{node.Bezeichnung}}
            speichern
            {{node.parentId}}
            <span>&nbsp;</span>
            <button mat-raised-button type="button" color="accent" (click)="dokumentenNamenAndern();">
                Ändern
            </button>
            <span>&nbsp;</span>
            <span>&nbsp;</span>
            <span>&nbsp;</span>
            {{node.Id}}
            <span>&nbsp;</span>
            <span>&nbsp;</span>
            <span>&nbsp;</span>
            Datum Placeholder
            <span>&nbsp;</span>
            <span>&nbsp;</span>
            <span>&nbsp;</span>
            Datum Placeholder
            <span>&nbsp;</span>
            <span>&nbsp;</span>
            <span>&nbsp;</span>
            <button mat-mini-fab color="primary" (click)="bearbeiten();">
                <mat-icon>edit</mat-icon>
            </button>
            <span>&nbsp;</span>
            <span>&nbsp;</span>
            <span>&nbsp;</span>
            <button mat-mini-fab color="primary" (click)="mail();">
                <mat-icon>mail</mat-icon>
            </button>
            <span>&nbsp;</span>
            <span>&nbsp;</span>
            <span>&nbsp;</span>
            <button mat-mini-fab color="primary" (click)="dokumentOeffnen();">
                <mat-icon>edit</mat-icon>
            </button>
            <span>&nbsp;</span>
            <span>&nbsp;</span>
            <span>&nbsp;</span>
            UR Freitext Speichern
            <span>&nbsp;</span>
            <span>&nbsp;</span>
            <span>&nbsp;</span>
            <button mat-mini-fab color="primary" (click)="dokumentLoeschen();">
                <mat-icon>delete</mat-icon>
            </button>
        </mat-tree-node>

        <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
            <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
                <mat-icon class="mat-icon-rtl-mirror">
                    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                </mat-icon>
            </button>
            {{node.name}}
        </mat-tree-node>
    </mat-tree>
</div>

和代码的rest

export interface Akte {
    AKTENID: number;
    istGeloescht: boolean;
    istAbgelegt: boolean;
    name: string;
    Id: number;
    parentId: number;
    children?: Dokument[];
}

export interface Dokument {
    DOCID: number;
    ANWID: number;
    MANID: number;
    AKTENID: number;
    PFAD: string;
    Erstelldatum: Date;
    Anderungsdatum: Date;
    Bezeichnung: string;
    Id: number;
    parentId: number;
}

/** Flat node with expandable and level information */
interface ExampleFlatNode {
    expandable: boolean;
    name: string;
    level: number;
}

const TREE_DATA: any[] = [
    {
        name: "testname", parentId: null, Id: 1, istGeloescht: false, istAbgelegt: false, AKTENID: 1111
    },
    {
        Bezeichnung: "Eine Bezeichnung", parentId: 1, Id: 2, AKTENID: 2, istAbgelegt: true, istGeloescht: true
    },
    {
        name: "wurst", parentId: null, Id: 2, istGeloescht: false, istAbgelegt: false, AKTENID: 1111
    },
];

@Component({
    selector: 'app-akte',
    templateUrl: './akte.component.html',
    styleUrls: ['./akte.component.scss']
})
export class AkteComponent implements OnInit {
    private _transformer = (node: Akte, level: number) => {
        return {
            expandable: !!node.children && node.children.length > 0,
            name: node.name,
            level: level,
        };
    }
    treeControl = new FlatTreeControl<ExampleFlatNode>(
        node => node.level, node => node.expandable);
    treeFlattener = new MatTreeFlattener(
        this._transformer, node => node.level, node => node.expandable, node => node.children);
    dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);

    constructor(
        private cookieService: CookieService,
        private _formBuilder: FormBuilder,
        public router: Router,
        public rest: RestService,
        globals: Globals
    ) {

    }

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

    ngOnInit() {
        this.mapAkteDokumente = new Map();
        this.AKTENID = 1;
        this.DOCID = 11111;
        this.dataSource.data = this.treeConstruct(TREE_DATA);
    }

    //constructTree recursively iterates through the tree to create nested tree structure.
    //We only need Id and parentId Columns in the flat data to construct this tree properly.
    treeConstruct(treeData) {
        let constructedTree = [];
        for (let leaf of treeData) {
            let treeObj = leaf;
            let assigned = false;
            this.constructTree(constructedTree, treeObj, assigned)
        }
        return constructedTree;
    }

    constructTree(constructedTree, treeObj, assigned) {
        if (treeObj.parentId == null) {
            treeObj.children = [];
            constructedTree.push(treeObj);
            return true;
        } else if (treeObj.parentId == constructedTree.Id) {
            treeObj.children = [];
            constructedTree.children.push(treeObj);
            return true;
        } else {
            if (constructedTree.children != undefined) {
                for (let index = 0; index < constructedTree.children.length; index++) {
                    let constructedObj = constructedTree.children[index];
                    if (assigned == false) {
                        assigned = this.constructTree(constructedObj, treeObj, assigned);
                    }
                }
            } else {
                for (let index = 0; index < constructedTree.length; index++) {
                    let constructedObj = constructedTree[index];
                    if (assigned == false) {
                        assigned = this.constructTree(constructedObj, treeObj, assigned);
                    }
                }
            }
            return false;
        }
    }
}