当用户在 Angular 中删除数据库中的项目时更新 UI 的最佳方式
Best way to update UI when the user removes an item in the database in Angular
我想知道当用户删除数据库中的项目时更新用户界面的最佳方式。我有以下场景:在用户界面中,我有绑定到组件中数组的地址,该数组是根据数据库中的数据分配的。当用户单击 "delete" 按钮时,我会执行一个 http 请求以删除数据库中的项目,但是当然,如果我可以使用 [=23=,用户界面 update.It 就不会那么容易了]() 以便组件自行刷新。但是当我导航到同一条路线时 angular 没有 reload/refresh 组件。我能想到的唯一解决方案是编写一些打字稿代码以从数组中删除该项目。
我的模特:
export class Address {
public id: number; //unique id I can use to remove the item
...
}
我组件的相关代码
addresses: Array<Address>;
....
removeAddress(id: number) : void {
//service used to make http requests, I pass the id to delete
this.addressService.removeAddress(id).subscribe((res) => {
//How can I update the UI on Success?
}, (err: HttpErrorResponse) => {
console.log(err);
});
如果响应没有错误 (HTTP 200),只需从数组中删除该项目。这将为用户节省流量。但是你也可以从数据库中重新加载剩余的项目。
delete myArray[key];
const index = myArray.indexOf(key, 0);
if (index > -1) {
myArray.splice(index, 1);
}
我想知道当用户删除数据库中的项目时更新用户界面的最佳方式。我有以下场景:在用户界面中,我有绑定到组件中数组的地址,该数组是根据数据库中的数据分配的。当用户单击 "delete" 按钮时,我会执行一个 http 请求以删除数据库中的项目,但是当然,如果我可以使用 [=23=,用户界面 update.It 就不会那么容易了]() 以便组件自行刷新。但是当我导航到同一条路线时 angular 没有 reload/refresh 组件。我能想到的唯一解决方案是编写一些打字稿代码以从数组中删除该项目。
我的模特:
export class Address {
public id: number; //unique id I can use to remove the item
...
}
我组件的相关代码
addresses: Array<Address>;
....
removeAddress(id: number) : void {
//service used to make http requests, I pass the id to delete
this.addressService.removeAddress(id).subscribe((res) => {
//How can I update the UI on Success?
}, (err: HttpErrorResponse) => {
console.log(err);
});
如果响应没有错误 (HTTP 200),只需从数组中删除该项目。这将为用户节省流量。但是你也可以从数据库中重新加载剩余的项目。
delete myArray[key];
const index = myArray.indexOf(key, 0);
if (index > -1) {
myArray.splice(index, 1);
}