angular - 刷新 ng2-smart-table
问题描述
我有一个组件,让我们说它叫做"Form",旁边还有另一个组件,我们可以称之为"Filing Lists"。
“ Form”是“NbWindowService”,“Filing Lists”是“ng2-smart-table”的“LocalDataSource”。现在我想要的是,在“表单”完成或销毁后,“归档列表”必须像我在文档中阅读的内容一样更新/刷新。如何正确地做到这一点?
加班-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() {
}
}
加班归档.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` });
}
}
解决方案
只需创建一个订阅服务的load()
方法和使用ng2-smart-table的方法。
fetchTableData(){
this.service.getOvertime().subscribe(data => {
this.source.load(data as []);
});
}
之后,openOvertimeForm()
通过订阅 windowRef 的onClose
状态来更新您的方法。
openOvertimeForm() {
this.windowRef = this.windowService.open(OvertimeFormComponent, { title: `File Overtime` });
this.windowRef.onClose.subscribe(() => {
this.fetchTableData();
})
}
推荐阅读
- php - 在 jQuery 上使用多个远程 ajax
- android - 在 Android 项目 build.gradle 文件中更新 Google Firebase 依赖项
- c++ - C++ 数组大于 0 打印代码
- c - 在for循环中运行scanf时出现逻辑错误,我该如何解决?
- xamarin - Xamarin.Forms:适用于 Android 的自定义上下文操作
- python - Python - 如何使用“with as”块结束套接字
- java - 在 pom.xml 文件中设置 Maven 本地存储库位置?
- google-sheets - 使用 IF() 函数的多个选项
- tensorflow - TensorFlow Cifar10 对 logits 和 label 的成本查找错误(logits 和 label 必须相同大小)
- python - NLTK 替换停用词