typescript Angular2-删除后更新UI
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39535192/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular2- Update UI after deleting
提问by usmanwalana
I have an angular2 app whose backend is in java. I have a list of customers. When i click to remove a customer , the customer is removed but the list does not update. If i manually refresh the page then the list updates. I tried routing to the list component in the subscribe of delete method but that does not work.
我有一个 angular2 应用程序，它的后端在 Java 中。我有一份客户名单。当我点击删除一个客户时，该客户被删除但列表没有更新。如果我手动刷新页面，则列表会更新。我尝试在订阅删除方法中路由到列表组件，但这不起作用。
list-customers.component.html
列表customers.component.html
<tr [class.warning]="customer.isDefault == 1" *ngFor="let customer of customers | orderBy:['firstName'] | search:searchCustomer.value;let serial = index">
<td>{{ serial+1 }}</td>
<td>{{ customer?.firstName+' '+customer?.lastName}}</td>
<td>{{ customer.email}}</td>
<td>{{ customer.mobileNumber}}</td>
<td>{{ customer.streetAddress}}</td>
<td>{{ customer.priceList?.name}}</td>
<td><a [routerLink]="['/loggedIn','customer','edit', customer.id ]"><i class="fa fa-edit fa-2x"></i></a></td>
<td><a (click)="delete(customer)"><i class="fa fa-trash-o fa-2x"></i></a></td>
</tr>
list-customers.component.ts
列表customers.component.ts
ngOnInit()
{
this.refreshCustomersList();
}
delete(customer)
{
this.userService.delete(customer.id)
.subscribe(
success=>
{
var index = this.customers.indexOf(customer, 0);
if (index > -1)
{
this.customers.splice(index, 1);
}
}
)
}
refreshCustomersList()
{
this._authHttp.get(
this.appService.getApiUrl() + "api/customer/list"
)
.map(res=>res.json())
.subscribe(
successResponse=>
{
this.customers = successResponse.data.customers;
},
() => console.log("Request Completed")
)
}
}
回答by jhhoff02
Try calling this.refreshCustomersList();in your deletefunction like this:
尝试像这样调用this.refreshCustomersList();你的delete函数：
delete(customer)
{
this.userService.delete(customer.id)
.subscribe(
success=>
{
var index = this.customers.indexOf(customer, 0);
if (index > -1)
{
this.customers.splice(index, 1);
this.refreshCustomersList();
}
}
)
}
This will update the customersarray after a customer is removed.
这将customers在删除客户后更新阵列。
回答by patelarpan
you can use JavaScript array filter like this.
您可以像这样使用 JavaScript 数组过滤器。
this.userService.delete(customer.id)
.subscribe(
success=>
{
let newCustomers = this.customers.filter(item => item.id !== customer.id);
this.customers = newCustomers;
}
)
回答by Rajat Malhotra
Instead of getting the whole list from the API again we can set the customers list as follows. It worked for me:
我们可以按如下方式设置客户列表，而不是再次从 API 获取整个列表。它对我有用：
delete(customer)
{
this.userService.delete(customer.id)
.subscribe(
success=>
{
var index = this.customers.indexOf(customer, 0);
if (index > -1)
{
this.customers = this.customers.splice(index, 1);
}
}
)
}
回答by Alok Kamboj
Splice will return the deleted element instead use slice to return the resulted array after deletion, like :-
Splice 将返回已删除的元素，而不是使用 slice 返回删除后的结果数组，例如：-
this.customers = this.customers.slice(index);
回答by Richa
Enter the following code In HTML:
在 HTML 中输入以下代码：
(click)="delete(customer.length-1-i)".
//
deleteFieldValue(index) {
this.customer.splice(index, 1);
this.revervefordispaly();
}
//for reverse:
revervefordispaly(){
this.reversedProductdata.reverse();
}
