问Ngx-数据表模板问题

EN

<ol class="breadcrumb">
    <li class="breadcrumb-item"><a [routerLink]="['/home']">Home</a></li>
    <li class="breadcrumb-item"><a [routerLink]="['/cldtools']">Cloud Runner Tools</a></li>
    <li class="breadcrumb-item active">Schedule Management</li>
</ol>

<div class="row" style="margin-top:20px;">
    <div class="col-lg-12">
        <h2>All Schedules</h2>
    </div>
</div>

<div class="row" style="margin-top:20px;">
    <div class="col-lg-12">
        <div class="dropdown">
            <button class="btn btn-primary">Create New </button>
            <div class="dropdown-content">
                <a [routerLink]="['/schedulemanagement/autoStartStopVm']" [queryParams]="{dropDownListSelectedItem:'AutoStart'}">AutoStart</a>
                <a [routerLink]="['/schedulemanagement/autoStartStopVm']" [queryParams]="{dropDownListSelectedItem:'AutoShutdown'}">AutoShutdown</a>
                <!--<a href="#">Auto Scale</a>-->
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <!--<div style="overflow-x:scroll; overflow-y:scroll; width: 100%">-->
        <ngx-datatable #table
                       class='datatable'
                       [sortType]="'single'"
                       [columns]="columns"
                       [columnMode]="'flex'"
                       [headerHeight]="40"
                       [footerHeight]="50"
                       [rowHeight]="'auto'"
                       [groupRowsBy]="'isCurrentDate'"
                       [limit]="10"
                       [rows]='rows'
                       [groupExpansionDefault]="true"
                       [scrollbarH]="true">

            <ngx-datatable-group-header [rowHeight]="60" #myGroupHeader>
                <ng-template let-group="group" let-expanded="expanded" ngx-datatable-group-header-template>
                    <div style="padding-left:5px;">
                        <a title="Expand/Collapse Group"
                           (click)="toggleExpandGroup(group)">
                            <b>{{group.value[0].isCurrentDate === true? 'Scheduled for Today':'Scheduled for other days'}}</b>
                        </a>
                    </div>
                </ng-template>
            </ngx-datatable-group-header>

            <ng-template #sortableColumnTemplate let-sort="sortFn" let-column="column" ngx-datatable-header-template>
                <span (click)="sort()" class="sort-fullwidth">{{column?.name}}</span>
                <input class="filter-box" placeholder='' (keyup)='updateFilter($event)' />
            </ng-template>

            <ng-template #dateColumn let-row="row" let-value="value" ngx-datatable-cell-template>
                <div>{{value | date:"short"}}</div>
            </ng-template>

            <ng-template #actionRowTemplate let-row="row" let-value="value" ngx-datatable-cell-template>
                <div style="display:block; text-align:center;">
                    <!-- <a title="copy"><i class="glyphicon glyphicon-copy"></i></a>                    -->
                    <a title="delete" (click)="deleteWarningModal.show();scheduleToDelete = value"><i class="glyphicon glyphicon-remove"></i></a>
                </div>

            </ng-template>
        </ngx-datatable>
    </div>
</div>

    <loading-spinner *ngIf="showSpinner"></loading-spinner>
    <modal #deleteWarningModal>
        <div class="app-modal-header">
            Warning
        </div>
        <div class="app-modal-body">
            Are you sure you want to delete the schedule?
        </div>
        <div class="app-modal-footer">
            <button type="button" (click)="deleteSchedule()" class="btn btn-primary">Yes</button>
            <button type="button" (click)="deleteWarningModal.hide()" class="btn btn-secondary">No</button>
        </div>
    </modal>

import { Component, Inject, OnInit, ViewChild, TemplateRef } from '@angular/core';
import { GridComponent } from '../shared/grid.component';
import { SchdedulingDetails } from '../../models/schedulingDetails';

//Services
import { ScheduleManagementService } from '../../services/schedulemanagement.service';
import { ToasterNotificationService } from '../../services/toasterNotification.service';
import { ModalComponent } from '../shared/modal.component';


@Component({
    selector: 'schedulemanagement',
    templateUrl: './schedule-management.component.html',
    styleUrls: ['./schedule-management.component.css', '../shared/grid.component.css']
})
export class ScheduleManagementComponent extends GridComponent implements OnInit {

    constructor(private _schedManagementService: ScheduleManagementService,
        private notificationsService: ToasterNotificationService) {
        super();
    }

    scheduleToDelete: string;
    showSpinner: boolean = true;
    @ViewChild('deleteWarningModal') deleteWarningModal: ModalComponent;
    @ViewChild('dateColumn') dateColumn: TemplateRef<any>;

    ngOnInit(){
        this.buildTable();
        this.populateTable();
    }



    buildTable() {
        this.columns = [
            {
                name: 'SID',
                prop: 'sapsid',
                sortable: true,
                sortString: '',
                flexGrow: 1,
                cellTemplate: this.customColumnTemplate,
                headerTemplate: this.sortableColumnTemplate
            },
            {
                name: 'CI Host',
                prop: 'ciHostName',
                sortable: true,
                sortString: '',
                flexGrow: 2,
                cellTemplate: this.customColumnTemplate,
                headerTemplate: this.sortableColumnTemplate
            },
            {
                name: 'App Host',
                prop: 'sapAppHostName',
                sortable: true,
                sortString: '',
                flexGrow: 2,
                headerTemplate: this.sortableColumnTemplate
            },
            {
                name: 'Instance#',
                prop: 'sapAppInstanceNumber',
                sortable: true,
                sortString: '',
                flexGrow: 2,
                headerTemplate: this.sortableColumnTemplate
            },
            {
                name: 'DB Host',
                prop: 'dbHostName',
                sortable: true,
                sortString: '',
                flexGrow: 2,
                headerTemplate: this.sortableColumnTemplate
            },
            {
                name: 'Starts on',
                prop: 'startDateTime',
                sortable: true,
                sortString: '',
                flexGrow: 3,
                headerTemplate: this.sortableColumnTemplate,
                cellTemplate: this.dateColumn
            },
            {
                name: 'Ends on',
                prop: 'stopDateTime',
                sortable: true,
                sortString: '',
                flexGrow: 3,
                headerTemplate: this.sortableColumnTemplate,
                cellTemplate: this.dateColumn
            },
            {
                name: 'Scheduled For',
                prop: 'actionName',
                sortable: true,
                sortString: '',
                flexGrow: 2.7,
                headerTemplate: this.sortableColumnTemplate,
            },
            {
                name: 'Frequency',
                prop: 'frequency',
                sortable: true,
                sortString: '',
                flexGrow: 2,
                headerTemplate: this.sortableColumnTemplate
            },                      
            {
                name: 'Action',
                prop: 'id',
                cellTemplate: this.actionRowTemplate,
                sortable: false,
                flexGrow: 1.3
            }            

        ];
    }

    populateTable() {
        this._schedManagementService.getSchedulingDetails().subscribe(
            response=>{
                this.showSpinner = false;
                this.updateRows(response);
            }, error => {
                this.showSpinner = false;
                this.notificationsService.notify('error', 'Error', "Unexpected error occured while retrieving Scheduling details.");
            }
        )
    }

    deleteSchedule(){
        let id = this.scheduleToDelete;
        this._schedManagementService.deleteSchedulingDetails(id).subscribe(
            result =>{
                this.rows = this.rows.filter(r=> r.id !== id);              
                this.deleteWarningModal.hide();
            },error =>{                
                this.notificationsService.notify('error', 'Error', "Unexpected error occured while deleting schedule.");
            });
    }
}