数据未显示在展开的表格中

Question

我有一个扩展的mat-table，用于显示数据。 但是，我在屏幕上看不到表格。 我在组件文件中使用了两个类。我指的是Stackblitz中的一个示例。在此示例中，他们还使用了两个类。我尝试调试代码，发现我的编译器从未到达填充数据的第二类中的JobExecutionScreenComponent.jobExecutionList ...我不知道如何从API获取数据时填充数据。

HTML代码：

    <mat-table [dataSource]="jobExecutionList">
        <!-- Id Column -->
        <ng-container matColumnDef="position">
            <mat-header-cell *matHeaderCellDef>
                Serial Number
            </mat-header-cell>
            <mat-cell *matCellDef="let element; let i = index"
                >{{ i + 1 }}
            </mat-cell>
        </ng-container>

        <ng-container matColumnDef="executionDate">
            <mat-header-cell *matHeaderCellDef>
                Execution Date
            </mat-header-cell>
            <mat-cell *matCellDef="let element"
                >{{ element.executionDate | date: 'yyyy-MM-dd' }}
            </mat-cell>
        </ng-container>

        <!-- Weight Column -->
        <ng-container matColumnDef="afterTimePeriod">
            <mat-header-cell *matHeaderCellDef>
                Current Time Period
            </mat-header-cell>
            <mat-cell *matCellDef="let element"
                >{{ element.afterTimePeriod }}
            </mat-cell>
        </ng-container>

        <!-- Symbol Column -->
        <ng-container matColumnDef="previousTimePeriod">
            <mat-header-cell *matHeaderCellDef>
                Previous Time Period
            </mat-header-cell>
            <mat-cell *matCellDef="let element"
                >{{ element.previousTimePeriod }}
            </mat-cell>
        </ng-container>

        <ng-container matColumnDef="status">
            <mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
            <mat-cell *matCellDef="let element"
                >{{ element.status }}
            </mat-cell>
        </ng-container>

                   <!-- Expanded Content Column - The detail row is made up 
of this one column -->
        <ng-container matColumnDef="expandedDetail">
            <mat-cell *matCellDef="let detail">
                The symbol for {{ detail.element.name }} is
                {{ detail.element.symbol }}
            </mat-cell>
        </ng-container>

        <mat-header-row
            *matHeaderRowDef="jobExecStatDisplayedColumns"
        ></mat-header-row>
        <mat-row
            *matRowDef="let row; columns: jobExecStatDisplayedColumns"
            matRipple
            class="element-row"
            [class.expanded]="expandedElement == row"
            (click)="expandedElement = row"
        >
        </mat-row>
        <mat-row
            *matRowDef="
                let row;
                columns: ['expandedDetail'];
                when: isExpansionDetailRow
            "
            [@detailExpand]="
                row.element == expandedElement ? 'expanded' : 'collapsed'
            "
            style="overflow: hidden"
        >
        </mat-row>
    </mat-table>
</div>

打字稿代码：

@Component({
selector: 'app-job-execution-screen',
templateUrl: './job-execution-screen.component.html',
styleUrls: ['./job-execution-screen.component.scss'],
animations: [
    trigger('detailExpand', [
        state(
            'collapsed',
            style({ height: '0px', minHeight: '0', visibility: 'hidden' })
        ),
        state('expanded', style({ height: '*', visibility: 'visible' })),
        transition(
            'expanded <=> collapsed',
            animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')
        )
    ])
]
})
export class JobExecutionScreenComponent implements OnInit {
isExpansionDetailRow = (i: number, row: Object) =>
    row.hasOwnProperty('detailRow');
expandedElement: any;
displaySpinner: boolean = false;
static jobExecutionList: any = [];
jobExecStatDisplayedColumns = [
    'position',
    'executionDate',
    'previousTimePeriod',
    'afterTimePeriod',
    'status',
    'actions',
    'spinner'
];
elementModel: Element = {
    id: null,
    executionDate: '',
    previousTimePeriod: '',
    afterTimePeriod: '',
    status: '',
    jobId: '',
    executionId: ''
};
public selectedElem: any;
projectId: any;
jobExecutionStat: any;
executionDate: string = new Date().toISOString().slice(0, 10);
executeJobStop: any;
changeStatus: any;
newStatus: any;
globalJobExecutionId: any;

constructor(
) {}
ngOnInit() {
    this.rendertable();

}

// API to get list of Running Jobs
rendertable() {
    const project = JSON.parse(this.dataService.getObject('project'));
    this.recommendationService
        .getCampaignJobList(project.id)
        .subscribe(data => {
            // this.jobExecutionList = data;
            //let data1:any = data;
            JobExecutionScreenComponent.jobExecutionList = new 
MatTableDataSource();

Date(n1.executionDate.replace('T','').replace(/-/g,'/'));

Date(n2.executionDate.replace('T','').replace(/-/g,'/'));

            JobExecutionScreenComponent.jobExecutionList.data = data;
            JobExecutionScreenComponent.jobExecutionList.sort = this.sort;
            JobExecutionScreenComponent.jobExecutionList.paginator = 
this.paginator;
        });
}

}
export class ExampleDataSource extends DataSource<any> {
/** Connect function called by the table to retrieve one stream containing 
the data to render. */
connect(): Observable<Element[]> {
    const rows = [];
    JobExecutionScreenComponent.jobExecutionList.forEach(element =>
        rows.push(element, { detailRow: true, element })
    );
    console.log(rows);
    return of(rows);
}

disconnect() {}
}