您可以在这里看到我的代码:
https://stackblitz.com/edit/angular-vcjnbf?file=src%2Fapp%2Fapp.component.html
我需要从表中的子元素中创建一棵树,现在我这样做了:
但是我需要这样:
也就是说,该元素具有子元素,我只能输出一个,如何循环执行? 正如您在循环中看到的那样,我需要带出关卡。
我找到了这样的解决方案,但是还有什么更好的方法吗?
component.html
<table mat-table
[dataSource]="dataSource"
multiTemplateDataRows
class="mat-elevation-z8">
<ng-container matColumnDef="{{column}}"
*ngFor="let column of columnsToDisplay">
<th mat-header-cell
*matHeaderCellDef> {{column}}
</th>
<td mat-cell
*matCellDef="let element">
{{element[column]}}
</td>
</ng-container>
<ng-container matColumnDef="{{column}}"
*ngFor="let column of ['expandedDetail', 'expandedDetail1']">
<td mat-cell
*matCellDef="let element"
[attr.colspan]="1"> 111
++{{element | json}}++
</td>
</ng-container>
<tr mat-row
*matRowDef="let element; columns: columnsToDisplay;"
class="example-element-row"
[class.example-expanded-row]="expandedElement === element"
(click)="expandedElement = element">
</tr>
<tr mat-row
*matRowDef="let row; columns: ['expandedDetail', 'expandedDetail1']"
class="example-detail-row">
</tr>
</table>
component.ts
import {DirectoryService} from '../shared/services/directory.service';
import {Component, OnInit} from '@angular/core';
import {animate, state, style, transition, trigger} from '@angular/animations';
@Component({
selector: 'app-units',
templateUrl: './units.component.html',
styleUrls: ['./units.component.scss'],
animations: [
trigger('detailExpand', [
state('collapsed', style({height: '0px', minHeight: '0', display: 'none'})),
state('expanded', style({height: '*'})),
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
]),
],
})
export class UnitsComponent implements OnInit {
dictionary = {};
dataSource = ELEMENT_DATA;
columnsToDisplay = ['name', 'weight'];
constructor(private directoryService: DirectoryService) {
}
ngOnInit() {
this.directoryService.getDictionary()
.subscribe(data => {
console.log(data);
this.dictionary = data;
});
}
}
const ELEMENT_DATA = [
{
position: 1,
name: 'Hydrogen',
weight: 1.0079,
symbol: 'H',
description: `Hydrogen is a chemical element with symbol H and atomic number 1. With a standard
atomic weight of 1.008, hydrogen is the lightest element on the periodic table.`,
level: [
{
test1: 'tata',
test2: 'vava'
}
]
}, {
position: 2,
name: 'Helium',
weight: 4.0026,
symbol: 'He',
description: `Helium is a chemical element with symbol He and atomic number 2. It is a
colorless, odorless, tasteless, non-toxic, inert, monatomic gas, the first in the noble gas
group in the periodic table. Its boiling point is the lowest among all the elements.`,
level: [
{
test1: 'tata',
test2: 'vava'
},
{
test1: 'tata',
test2: 'vava'
}
]
}, {
position: 3,
name: 'Lithium',
weight: 6.941,
symbol: 'Li',
description: `Lithium is a chemical element with symbol Li and atomic number 3. It is a soft,
silvery-white alkali metal. Under standard conditions, it is the lightest metal and the
lightest solid element.`,
level: [
{
test1: 'tata',
test2: 'vava'
},
{
test1: 'tata',
test2: 'vava'
},
{
test1: 'tata',
test2: 'vava'
}
]
}
];