- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我能够从数据库中异步删除选定的行,但是如何在不刷新页面的情况下更新 View 部分。
这是我的组件代码。
import { Component, OnInit, Input } from '@angular/core';
import { Router } from "@angular/router";
import { UsersService } from 'app/+users/users.service';
import { dateFormatPipe } from 'app/shared/custom-pipe/date-format.pipe';
import { FlashMessagesService } from 'angular2-flash-messages';
declare var $:any;
@Component({
selector: 'app-manage-user',
templateUrl: './manage-user.component.html'
})
export class ManageUserComponent implements OnInit{
constructor(
private usersService: UsersService,
private route: Router,
private _flash: FlashMessagesService,
) {}
tableData: any;
ngOnInit() {
this.fetchTableData();
}
fetchTableData(){
this.tableData = {
ajax: (data, callback, settings) => {
this.usersService.getUsers(0).subscribe(data => {
if(data.success){
callback({
aaData: data.data
});
} else {
alert(data.msg);
}
},
error => {
alert('Internal server error..check database connection.');
});
},
columns: [
{
render: function (data, type, row, meta) {
return meta.row + 1;
}
},
{
data: function (name) { return name.firstname+ ' ' + name.lastname}
},
{data: 'email'},
{data: 'user_role'},
{data: function(data){
return new dateFormatPipe().transform(data.created_at);
}},
{
render: function (data, type, row) {
return `<button type="button" class="btn btn-warning btn-xs edit" data-element-id="${row._id}">
<i class="fa fa-pencil-square-o"></i> Edit</button>
<button type="button" class="btn btn-danger btn-xs delete" data-element-id="${row._id}">
<i class="fa fa-pencil-square-o"></i> Delete</button>`;
}
}
],
buttons: [
'copy', 'pdf', 'print'
]
};
document.querySelector('body').addEventListener('click', (event)=> {
let target = <Element>event.target; // Cast EventTarget into an Element
if (target.tagName.toLowerCase() === 'button' && $(target).hasClass('edit')) {
this.user_edit(target.getAttribute('data-element-id'));
}
if (target.tagName.toLowerCase() === 'button' && $(target).hasClass('delete')) {
this.user_delete(target.getAttribute('data-element-id'));
}
});
}
user_delete(user_id){
this.usersService.deleteUserById(user_id).subscribe(data => {
if(data.success){
// On successful deletion of the data from the database I need to update the datatable so that the deleted row will vanish.
} else {
this._flash.show(data.msg , { cssClass: 'alert alert-warning fade in', timeout: 4000 });
}
},
error => {
this._flash.show('Internal server error..check database connection.' , { cssClass: 'alert alert-warning fade in', timeout: 4000 });
});
}
user_edit(user_id){
console.log("user edit:" +user_id);
}
}
最佳答案
尝试使用 *ngIf directive
table 上。
<div class="widget-body no-padding" *ngIf="tData">
<sa-datatable [options]="tableData" paginationLength="true" tableClass="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th data-hide="phone"> ID </th>
<th data-class="expand"> Name </th>
<th data-hide="phone,tablet"> Email </th>
<th data-hide="phone,tablet"> Role </th>
<th data-hide="phone,tablet"> join Date </th>
<th data-hide="phone,tablet"> Action </th>
</tr>
</thead>
</sa-datatable>
</div>
tData: boolean = false;
并在调用 API 时使其为真,以便如果有任何数据则将呈现表。
fetchTableData(){
this.tData = true;
...
}
user_delete(user_id) {
this.tData= false;
this.usersService.deleteUserById(user_id).subscribe(data => {
if (data.success) {
// On successful deletion of the data form database i need to update the datatable so that the deleted row will be vanished.
this.fetchTableData();
this._flash.show(data.msg, { cssClass: 'alert alert-info fade in', timeout: 4000 });
} else {
this._flash.show(data.msg, { cssClass: 'alert alert-warning fade in', timeout: 4000 });
}
},
error => {
this._flash.show('Internal server error..check database connection.', { cssClass: 'alert alert-warning fade in', timeout: 4000 });
});
}
fetchTableData();
哪个实习生加载更新的数据并显示在表格中。
关于datatable - 角 5 : how to update datatable after deleting a row,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49067363/
我写了这个课: class StaticList { private: int headFree; int headList; int locNe
我目前正在使用 SQL Server Management Studio 2005,我遇到了一些问题,但首先是我的 DB 架构的摘录(重要的): imghack link to the image 我
范围:两个表。创建新顾客时,他们会将一些有关他们的信息存储到第二个表中(这也是使用触发器完成的,它按预期工作)。这是我的表结构和关系的示例。 表 1-> 赞助人 +-----+---------+--
我想知道,在整个程序中,我使用了很多指向 cstrings 的 char* 指针,以及其他指针。我想确保在程序完成后删除所有指针,即使 Visual Studio 和 Code Blocks 都为我做
考虑以下代码: class Foo { Monster* monsters[6]; Foo() { for (int i = 0; i < 6; i++)
关于 this page , 是这么写的 One reason is that the operand of delete need not be an lvalue. Consider: delet
我无法在 DELETE CASCADE ON UPDATE CASCADE 上添加外键约束。 我使用两个简单的表格。 TAB1 有 2 列:ID int(10) unsigned NOT NULL A
你好,有没有办法把它放在一个声明中? DELETE e_worklist where wbs_element = '00000000000000000054TTO'. DELETE e_workli
我有一个表,它是我系统的核心,向我的客户显示的所有结果都存储在那里。它增长得非常快,因此每 3 小时我应该删除早于 X 的记录以提高性能。 仅删除这些记录就足够了,还是应该在删除后运行优化表? 我正在
这个问题在这里已经有了答案: delete vs delete[] operators in C++ (7 个答案) 关闭 9 年前。 做和做有什么区别: int* I = new int[100]
为什么这段代码是错误的?我是否遗漏了有关 delete 和 delete[] 行为的内容? void remove_stopwords(char** strings, int* length) {
当我使用 new [] 申请内存时。最后,我使用 delete 来释放内存(不是 delete[])。会不会造成内存泄漏? 两种类型: 内置类型,如 int、char、double ... 我不确定。
所以在代码审查期间,我的一位同事使用了 double* d = new double[foo]; 然后调用了 delete d。我告诉他们应该将其更改为 delete [] d。他们说编译器不需要基本
范围:两个表。当一个新顾客被创建时,他们将一些关于他们的信息存储到第二个表中(这也是使用触发器完成的,它按预期工作)。这是我的表结构和关系的示例。 表 1-> 赞助人 +-----+---------
C++14 介绍 "sized" versions of operator delete ,即 void operator delete( void* ptr, std::size_t sz ); 和
我正在执行类似的语句 DELETE FROM USER WHERE USER_ID=1; 在 SQLDeveloper 中。 由于用户在许多表中被引用(例如用户有订单、设置等),我们激活了 ON DE
出于某种原因,我找不到我需要的确切答案。我在这里搜索了最后 20 分钟。 我知道这很简单。很简单。但由于某种原因我无法触发触发器.. 我有一个包含两列的表格 dbo.HashTags |__Id_|_
这是我的代码: #include #include #include int main() { setvbuf(stdout, NULL, _IONBF, 0); setvbuf
是否可以在 postgres 中使用单个命令删除所有表中的所有行(不破坏数据库),或者在 postgres 中级联删除? 如果没有,那么我该如何重置我的测试数据库? 最佳答案 is it possib
我想删除一些临时文件的内容,所以我正在开发一个小程序来帮我删除它们。我有这两个代码示例,但我对以下内容感到困惑: 哪个代码示例更好? 第一个示例 code1 删除文件 1 和 2,但第二个示例 cod
我是一名优秀的程序员,十分优秀!