Angular 角垫台扩展和折叠未按预期工作

我不太懂棱角， 我得到的html文件如下

<div class="mat-elevation-z8">
<table mat-table [dataSource]="resultssummaries" multiTemplateDataRows  class="mat-elevation-z8" matSort width="100%">

    <!--- Note that these columns can be defined in any order.
            The actual rendered columns are set as a property on the row definition" -->

    <!-- Currency Code Column -->
    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> id </th>
        <td mat-cell *matCellDef="let resultssummaries" align="left"> {{resultssummaries.id}} </td>
    </ng-container>

    <!-- Currency Symbol Column -->
    <ng-container matColumnDef="build">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Build Version </th>
        <td mat-cell *matCellDef="let resultssummaries" align="left"> {{resultssummaries.buildversion}} </td>
    </ng-container>

    <!-- Base Name Column -->
    <ng-container matColumnDef="host">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Host Name </th>
        <td mat-cell *matCellDef="let resultssummaries" align="left"> {{resultssummaries.hostAddress}} </td>
    </ng-container>

    <!-- Fraction Symbol Column -->
    <ng-container matColumnDef="tests">
        <th mat-header-cell *matHeaderCellDef align="center"> All Tests </th>
        <td mat-cell *matCellDef="let resultssummaries" align="left"> {{resultssummaries.alltests}} </td>
    </ng-container>

    <!-- Fraction Name Column -->
    <ng-container matColumnDef="pass">
        <th mat-header-cell *matHeaderCellDef> All Pass </th>
        <td mat-cell *matCellDef="let resultssummaries" align="left"> {{resultssummaries.allpass}} </td>
    </ng-container>

    <ng-container matColumnDef="fails">
        <th mat-header-cell *matHeaderCellDef> All Errors </th>
        <td mat-cell *matCellDef="let resultssummaries" align="left"> {{resultssummaries.allfails}} </td>
    </ng-container>

    <ng-container matColumnDef="errors">
        <th mat-header-cell *matHeaderCellDef> All Errors </th>
        <td mat-cell *matCellDef="let resultssummaries" align="left"> {{resultssummaries.allerrors}} </td>
    </ng-container>


    <ng-container matColumnDef="expandedDetail">
        <td mat-cell *matCellDef="let resultssummaries" [attr.colspan]="displayedColumns.length">
            <div class="example-element-detail"
                 [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'" >
                <table mat-table [dataSource]="resultssummaries.testsummary" multiTemplateDataRows  class="mat-elevation-z8" matSort width="100%">

                    <!--- Note that these columns can be defined in any order.
                            The actual rendered columns are set as a property on the row definition" -->

                    <!-- Currency Code Column -->
                    <ng-container matColumnDef="package">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header> package name </th>
                        <td mat-cell *matCellDef="let test" align="left">{{test.packageName}}</td>
                    </ng-container>

                    <!-- Currency Symbol Column -->
                    <ng-container matColumnDef="tests">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header> Tests </th>
                        <td mat-cell *matCellDef="let test" align="left"> {{test.tests}}  </td>
                    </ng-container>

                    <!-- Base Name Column -->
                    <ng-container matColumnDef="fail">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header> Fail </th>
                        <td mat-cell *matCellDef="let test" align="left"> {{ test.fail }}  </td>
                    </ng-container>

                    <!-- Fraction Symbol Column -->
                    <ng-container matColumnDef="error">
                        <th mat-header-cell *matHeaderCellDef> Error </th>
                        <td mat-cell *matCellDef="let test" align="left"> {{test.error }} </td>
                    </ng-container>

                    <!-- Fraction Name Column -->
                    <ng-container matColumnDef="pass">
                        <th mat-header-cell *matHeaderCellDef> Pass </th>
                        <td mat-cell *matCellDef="let test" align="left">{{test.pass}}  </td>
                    </ng-container>




                    <ng-container matColumnDef="expandedDetail1">
                        <td mat-cell *matCellDef="let test" [attr.colspan]="displayedColumns.length">
                            <div class="example-element-detail">
                                <table mat-table [dataSource]="test.testcases"   class="mat-elevation-z8" matSort width="100%">


                                    <ng-container matColumnDef="date">
                                        <th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
                                        <td mat-cell *matCellDef="let testcase" align="left">{{testcase.date}}</td>
                                    </ng-container>

                                    <!-- Currency Symbol Column -->
                                    <ng-container matColumnDef="class">
                                        <th mat-header-cell *matHeaderCellDef mat-sort-header> Class </th>
                                        <td mat-cell *matCellDef="let testcase" align="left"> {{testcase.className}}  </td>
                                    </ng-container>

                                    <!-- Base Name Column -->
                                    <ng-container matColumnDef="testname">
                                        <th mat-header-cell *matHeaderCellDef mat-sort-header> Test Name </th>
                                        <td mat-cell *matCellDef="let testcase" align="left"> {{ testcase.testName }}  </td>
                                    </ng-container>


                                    <ng-container matColumnDef="rrn">
                                        <th mat-header-cell *matHeaderCellDef> RRN </th>
                                        <td mat-cell *matCellDef="let testcase" align="left"> {{testcase.rrn }} </td>
                                    </ng-container>

                                    <ng-container matColumnDef="endpoints">
                                        <th mat-header-cell *matHeaderCellDef> End Points </th>
                                        <td mat-cell *matCellDef="let testcase" align="left">{{testcase.endpoints}}  </td>
                                    </ng-container>

                                    <ng-container matColumnDef="result">
                                        <th mat-header-cell *matHeaderCellDef> Result </th>
                                        <td mat-cell *matCellDef="let testcase" align="left">{{testcase.result}}  </td>
                                    </ng-container>

                                    <ng-container matColumnDef="failreason">
                                        <th mat-header-cell *matHeaderCellDef> Result </th>
                                        <td mat-cell *matCellDef="let testcase" align="left">{{testcase.failReason}}  </td>
                                    </ng-container>



                                    <tr mat-header-row *matHeaderRowDef="displayedColumnsTestcase"></tr>
                                    <tr mat-row *matRowDef="let element; columns: displayedColumnsTestcase;">
                                    </tr>

                                </table>
                            </div>
                        </td>
                    </ng-container>

                    <tr mat-header-row *matHeaderRowDef="displayedColumnsTestSummary"></tr>
                    <tr mat-row *matRowDef="let element1; columns: displayedColumnsTestSummary;"
                        class="example-element-row"
                        [class.example-expanded-row]="expandedElement1 === element"
                        (click)="expandedElement1 = expandedElement1 === element ? null : element">
                    </tr>
                    <tr mat-row *matRowDef="let row; columns: ['expandedDetail1']" class="example-detail-row"></tr>
                </table>

            </div>
        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let element; columns: displayedColumns;"
        class="example-element-row"
        [class.example-expanded-row]="expandedElement === element"
        (click)="expandedElement = expandedElement === element ? null : element">
    </tr>
    <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>

</table>

身份证件
{{resultsummaries.id}
构建版本
{{resultssummaries.buildversion}
主机名
{{resultssummaries.hostAddress}
所有测试
{{resultsummaries.alltests}
通关
{{resultsummaries.allpass}
所有错误
{{resultssummaries.allfails}
所有错误
{{resultssummaries.allerrors}
包名
{{test.packageName}
测验
{{test.tests}
失败
{{test.fail}}
错误
{{test.error}}
通过
{{test.pass}}
日期
{{testcase.date}
等级
{{testcase.className}
测试名称
{{testcase.testName}
RRN
{{testcase.rrn}
终点
{{testcase.endpoints}}
结果
{{testcase.result}
结果
{{testcase.failReason}

我的组件

@Component({
    selector: 'jhi-resultssummary',
    templateUrl: './resultssummary.component.html',
    styleUrls: ['resultsummary.entity.css'],
    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 ResultssummaryComponent extends DataSource<any> implements OnInit, OnDestroy {
    currentAccount: any;
    // testsummary : ITestSummary;
    resultssummaries: IResultssummary[];
    error: any;
    success: any;
    eventSubscriber: Subscription;
    routeData: any;
    links: any;
    totalItems: any;
    queryCount: any;
    itemsPerPage: any;
    page: any;
    predicate: any;
    previousPage: any;
    reverse: any;
    displayedColumns: string[] = ['id', 'build', 'host', 'tests', 'pass', 'errors', 'fails'];
    displayedColumnsTestSummary: string[] = ['package', 'tests', 'fail', 'error', 'pass'];
    displayedColumnsTestcase: string[] = ['date', 'class', 'testname', 'rrn', 'endpoints', 'result', 'failreason'];
    dataSource = new MatTableDataSource<IResultssummary>(this.resultssummaries);
    expandedElement: any;
    expandedElement1: any;
    constructor(
        private resultssummaryService: ResultssummaryService,
        private parseLinks: JhiParseLinks,
        private jhiAlertService: JhiAlertService,
        private principal: Principal,
        private activatedRoute: ActivatedRoute,
        private router: Router,
        private eventManager: JhiEventManager
    ) {
        super();
        this.itemsPerPage = ITEMS_PER_PAGE;
        this.routeData = this.activatedRoute.data.subscribe(data => {
            this.page = data.pagingParams.page;
            this.previousPage = data.pagingParams.page;
            this.reverse = data.pagingParams.ascending;
            this.predicate = data.pagingParams.predicate;
        });
    }
    isExpansionDetailRow = (i: number, row: Object) => row.hasOwnProperty('detailRow');
    isExpansionDetailRow1 = (i: number, row: Object) => row.hasOwnProperty('detailRow');
    connect(): Observable<Element[]> {
        const rows = [];
        this.resultssummaries.forEach(element => rows.push(element, { detailRow: true, element }));
        console.log(rows);
        return of(rows);
    }

    disconnect() { }

    loadAll() {
        this.resultssummaryService
            .query({
                page: this.page - 1,
                size: this.itemsPerPage,
                sort: this.sort()
            })
            .subscribe(
                (res: HttpResponse<IResultssummary[]>) => this.paginateResultssummaries(res.body , res.headers),
                (res: HttpErrorResponse) => this.onError(res.message),
            );
    }

    loadPage(page: number) {
        if (page !== this.previousPage) {
            this.previousPage = page;
            this.transition();
        }
    }

    transition() {
        this.router.navigate(['/resultssummary'], {
            queryParams: {
                page: this.page,
                size: this.itemsPerPage,
                sort: this.predicate + ',' + (this.reverse ? 'asc' : 'desc')
            }
        });
        this.loadAll();
    }

    clear() {
        this.page = 0;
        this.router.navigate([
            '/resultssummary',
            {
                page: this.page,
                sort: this.predicate + ',' + (this.reverse ? 'asc' : 'desc')
            }
        ]);
        this.loadAll();
    }

    ngOnInit() {
        this.loadAll();
        this.principal.identity().then(account => {
            this.currentAccount = account;
        });
        this.registerChangeInResultssummaries();
    }

    ngOnDestroy() {
        this.eventManager.destroy(this.eventSubscriber);
    }

    trackId(index: number, item: IResultssummary) {
        return item.id;
    }

    registerChangeInResultssummaries() {
        this.eventSubscriber = this.eventManager.subscribe('resultssummaryListModification', response => this.loadAll());
    }

    sort() {
        const result = [this.predicate + ',' + (this.reverse ? 'asc' : 'desc')];
        if (this.predicate !== 'id') {
            result.push('id');
        }
        return result;
    }
    private paginateResultssummaries(data: IResultssummary[], headers: HttpHeaders) {
        this.links = this.parseLinks.parse(headers.get('link'));
        this.totalItems = parseInt(headers.get('X-Total-Count'), 10);
        this.queryCount = this.totalItems;
        this.resultssummaries = data;
        this.resultssummaries = data.map(resultsummaries =>  new Resultssummary().deserialize(resultsummaries));
        console.log(this.resultssummaries);
        /*this.testsummary = testsummary1['testsummary'][0];
         console.log(this.testsummary["tests"]);
         console.log("testsummary");
         console.log(testsummary1);
         console.log(data1); */
    }
    private onError(errorMessage: string) {
        this.jhiAlertService.error(errorMessage, null, null);
    }

}

@组件({
选择器：“jhi结果摘要”，
templateUrl:'./resultssummary.component.html'，
样式URL:['resultsummary.entity.css']，
动画：[
触发器（'detailExpand'[
状态（'collapped'，样式（{height:'0px'，minHeight:'0'，display:'none'}）），
状态（'expanded'，样式（{height:'*'}）），
过渡（“展开折叠”，动画（“225ms立方贝塞尔（0.4,0.0,0.2,1）”，
]),
],
})
导出类ResultssummaryComponent扩展数据源实现OnInit、OnDestroy{
经常账户：任何；
//testsummary:ITestSummary；
结果总结：IResultssummary[]；
错误：任何；
成功：任何；
事件订户：订阅；
路由数据：任何；
链接：任何；
总计项目：任何；
查询计数：任何；
itemsPerPage：任何；
页码：任意；
谓词：any；
上一页：任何；
反面：任何；
displayedColumns:string[]=['id'，'build'，'host'，'tests'，'pass'，'errors'，'fails']；
displayedColumnsTestSummary:字符串[]=['package'，'tests'，'fail'，'error'，'pass']；
displayedColumnsTestcase:string[]=['date'，'class'，'testname'，'rrn'，'endpoints'，'result'，'failreason']；
dataSource=新MatTableDataSource（this.resultssummaries）；
膨胀元素：任何；
扩展元素1：任何；
建造师(
私有resultssummaryService:resultssummaryService，
专用解析链接：JhiParseLinks，
私人JhilertService:JhilertService，
私人校长：校长，
私有激活路由：激活路由，
专用路由器：路由器，
私有事件管理器：JhiEventManager
) {
超级（）；
this.itemsPerPage=每页的项目数；
this.routeData=this.activatedRoute.data.subscribe（数据=>{
this.page=data.pagingParams.page；
this.previousPage=data.pagingParams.page；
this.reverse=data.pagingParams.ascending；
this.predicate=data.pagingParams.predicate；
});
}
isExpansionDetailRow=（i:number，row:Object）=>row.hasOwnProperty（'detailRow'）；
isExpansionDetailRow1=（i:number，row:Object）=>row.hasOwnProperty（'detailRow'）；
connect（）：可观察{
常量行=[]；
forEach（element=>rows.push（element，{detailRow:true，element}））；
console.log（行）；
返回（行）；
}
断开连接（）{}
loadAll（）{
此.resultssummaryService
.查询({
第页：this.page-1，
大小：this.itemsPerPage，
排序：this.sort（）
})
.订阅(
（res:Htt）