刷新ng2-smart-table

Question

我有一个组件，我们称它为“表格” ，此外，我还有一个可以称为“文件列表” 的组件。

“表单” 是“ NbWindowService”，“归档列表” 是“ ng2-smart-table”的“ LocalDataSource”。现在我想要的是，在“表单”完成或销毁之后，必须像我在文档中阅读的内容一样，更新/刷新“提交列表”。如何正确地做到这一点？

overtime-form.component.ts

import { Component, OnInit } from '@angular/core';
import { NbAuthJWTToken, NbAuthService } from '@nebular/auth';
import { OvertimeService } from '../../services/overtime.service';
import { Overtime } from '../../models/overtime.model';

@Component({
  selector: 'ngx-overtime-form',
  templateUrl: './overtime-form.component.html',
  styleUrls: ['./overtime-form.component.scss']
})
export class OvertimeFormComponent implements OnInit {
  showMessages: any = {};
  user: any;
  overtime: Overtime = {
    //some model values instantiation
  };

  constructor(private overtimeService: OvertimeService,
    private authService: NbAuthService) {

    this.authService.onTokenChange()
      .subscribe((token: NbAuthJWTToken) => {
        if (token.isValid()) {
          this.user = token.getPayload();
          this.overtime.employee_id = this.user.employee_id;
        }
      });
  }

  fileOvertime() {
    this.showMessages = {};
    this.overtimeService.overtimeFiling(this.overtime).subscribe(
      (result) => {
        this.showMessages.success = result
        this.overtime.employee_id = this.overtime.employee_id;
      }, (err) => {
        this.showMessages.error = err.error;
        this.overtime.employee_id = this.overtime.employee_id;
      }
    )
  }

  ngOnInit() {
  }

}

overtime-filing.component.ts

import { Component, OnInit } from '@angular/core';
import { NbWindowService } from '@nebular/theme';
import { DatePipe } from '@angular/common';

import { LocalDataSource } from 'ng2-smart-table';
import { OvertimeService } from '../services/overtime.service';
import { OvertimeFormComponent } from '../forms/overtime-form/overtime-form.component';
@Component({
  selector: 'ngx-overtime-filing',
  templateUrl: './overtime-filing.component.html',
  styleUrls: ['./overtime-filing.component.scss']
})
export class OvertimeFilingComponent implements OnInit {

  settings = {
    edit: {
      editButtonContent: '<i class="nb-edit"></i>',
      saveButtonContent: '<i class="nb-checkmark"></i>',
      cancelButtonContent: '<i class="nb-close"></i>',
    },
    delete: {
      deleteButtonContent: '<i class="nb-trash"></i>',
      confirmDelete: true,
    },
    actions: {
      add: false,
    },
    columns: {
      status: {
        title: 'Status',
        type: 'string'
      },
      transaction_no: {
        title: 'Transaction #',
        type: 'string'
      },
      date: {
        title: 'Date',
        valuePrepareFunction: (date) => {
          return this.datePipe.transform(new Date(date), 'MMM dd, yyyy');
        }
      },
      start_date: {
        title: 'Start date',
        valuePrepareFunction: (start_date) => {
          return this.datePipe.transform(new Date(start_date), 'MMM dd, yyyy');
        }
      },
      end_date: {
        title: 'End date',
        valuePrepareFunction: (end_date) => {
          return this.datePipe.transform(new Date(end_date), 'MMM dd, yyyy');
        }
      },
      start_time: {
        title: 'Start time',
        valuePrepareFunction: (start_time) => {
          const date = new Date();
          var month = date.getUTCMonth() + 1;
          var day = date.getUTCDate();
          var year = date.getUTCFullYear();

          return this.datePipe.transform(new Date(year + '-' + month + '-' + day + ' ' + start_time), 'hh:mm aa');
        }
      },
      end_time: {
        title: 'End time',
        valuePrepareFunction: (end_time) => {
          const date = new Date();
          var month = date.getUTCMonth() + 1;
          var day = date.getUTCDate();
          var year = date.getUTCFullYear();

          return this.datePipe.transform(new Date(year + '-' + month + '-' + day + ' ' + end_time), 'hh:mm aa');
        }
      },
      hours_filed: {
        title: 'Hours filed',
        type: 'number'
      },
      hours_approved: {
        title: 'Hours approved',
        type: 'number'
      },
      is_convert_to_leave: {
        title: 'Convert to leave',
        valuePrepareFunction: (is_convert_to_leave) => { return is_convert_to_leave == 1 ? 'Yes' : 'No' }
      },
      is_converted: {
        title: 'Converted',
        valuePrepareFunction: (is_converted) => { return is_converted == 1 ? 'Yes' : 'No' }
      },
      hours_filed_to_leave: {
        title: 'Hours filed to leave',
        type: 'number'
      },
      leave_type: {
        title: 'Leave type',
        type: 'string'
      },
      hours_converted_to_leave: {
        title: 'Hours converted to leave',
        type: 'number'
      },
      reason: {
        title: 'Reason',
        type: 'string'
      },
      created_by: {
        title: 'Created by',
        type: 'string'
      },
      date_created: {
        title: 'Date created',
        valuePrepareFunction: (date_created) => {
          return this.datePipe.transform(new Date(date_created), 'MMM dd, yyyy hh:mm aa');
        }
      },
      approved_by: {
        title: 'Approved by',
        type: 'string'
      },
      date_approved: {
        title: 'Date Approved',
        valuePrepareFunction: (date_approved) => {
          return this.datePipe.transform(new Date(date_approved), 'MMM dd, yyyy hh:mm aa');
        }
      },
      modified_by: {
        title: 'Modified by',
        type: 'string'
      },
      date_modified: {
        title: 'Date modified',
        valuePrepareFunction: (date_modified) => {
          return this.datePipe.transform(new Date(date_modified), 'MMM dd, yyyy hh:mm aa');
        }
      }
    },
  };

  source: LocalDataSource = new LocalDataSource();

  constructor(private service: OvertimeService,
    private windowService: NbWindowService,
    private datePipe: DatePipe) {
    this.service.getOvertime().subscribe(data => {
      this.source.load(data);
    });
  }

  ngOnInit() {
  }

  openOvertimeForm() {
    this.windowService.open(OvertimeFormComponent, { title: `File Overtime` });
  }
}

Answer 1

只需创建一种订阅服务的方法并使用ng2-smart-table的load()方法即可。

fetchTableData(){
    this.service.getOvertime().subscribe(data => {
      this.source.load(data as []);
    });
}

此后，通过订阅windowRef的openOvertimeForm()状态来更新onClose方法。

openOvertimeForm() {
    this.windowRef = this.windowService.open(OvertimeFormComponent, { title: `File Overtime` });
    this.windowRef.onClose.subscribe(() => {
      this.fetchTableData();
    })
}