Der Code von mir kommt von einem Tutorial, aber führt nicht zum gewünschten Ergebnis.
Hier die Datenaufstellung:
Hier die DataSource und TreeControl:
Hier mein HTML-Code:
Hier mein app.modules.ts:
An der Oberfläche werden die oberen Knoten angezeigt, was aus den ersten HTML-Tag hervorgeht:
Das "mat-nested-tree-node"-Tag wird praktisch komplett ignoriert. Im Inspektor sieht man nur dieses Komentar:
Ich wäre für jede Hilfe Dankbar! Bin ein absoluter Angular Anfänger.
Hier die Datenaufstellung:
interface CourseNode {
name: string;
children?: CourseNode[];
}
const TREE_DATA: CourseNode[] = [
{
name: 'Angular for beginners'
}, {
name: 'Angular Component @Input()'
}, {
name: 'Angular Component @Output()'
}, {
name: 'Angular Material in Depth',
children: [
{
name: 'Introduktion to Angular Material',
children: [
{
name: 'Form Components'
}, {
name: 'Navigation and Containers'
}
]
}
]
}
]
Hier die DataSource und TreeControl:
nestedDataSource: MatTreeNestedDataSource<CourseNode> = new MatTreeNestedDataSource<CourseNode>();
nestedTreeControl: NestedTreeControl<CourseNode> = new NestedTreeControl<CourseNode>(node => node.children);
Hier mein HTML-Code:
<mat-tree class="bg_standard_{{werk}}" [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
{{node.name}}
</mat-tree-node>
</mat-tree>
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
<div class="mat-tree-node">
<button mat-icon-button matTreeNodeToggle>
<mat-icon>
{{nestedTreeControl.isExpanded(node) ? "expand_more": "chevron_right"}}
</mat-icon>
</button>
{{node.name}}
</div>
<div class="nested-node">
<ng-container matTreeNodeOutlet></ng-container>
</div>
</mat-nested-tree-node>
Hier mein app.modules.ts:
import {MatIconModule} from "@angular/material/icon";
@NgModule({
declarations: [
...
],
imports: [
...
BrowserAnimationsModule,
MatIconModule,
MatTreeModule
],
providers: [
..
],
bootstrap: [AppComponent]
})
An der Oberfläche werden die oberen Knoten angezeigt, was aus den ersten HTML-Tag hervorgeht:
Das "mat-nested-tree-node"-Tag wird praktisch komplett ignoriert. Im Inspektor sieht man nur dieses Komentar:
<!--bindings={
"ng-reflect-when": "hasNestedChild(index, node) {\n"
}-->
Ich wäre für jede Hilfe Dankbar! Bin ein absoluter Angular Anfänger.