Angular CRUD - 在 add/update/delete 操作后刷新 UI

Question

我想知道在 Angular 中从 CRUD 执行 add/update/delete 操作时刷新 UI 会更好。

选项如下（以删除动作为例）：

1. 执行操作后用先前获取的数据更新局部变量。

deleteProduct(id) {
    this.productsService.deleteProduct(id).subscribe(status => {
        this.products = this.products.filter(item => item.id != id);
    });
}

2. 再次调用 REST 获取项目 API.

deleteProduct(id) {
    this.productsService.deleteProduct(id).subscribe(status => {
        this.getProducts();
    });
}

getProducts() {
    this.productsService.getProducts().subscribe(products => {
        this.products = products;
    });
}

这也适用于添加或编辑，显然需要更多代码。

就良好做法和性能而言，哪个选项更好？在本地更新变量数据或执行新的http请求以获取更新的数据。

Answer 1

第一种方法更受欢迎，它比第二种方法耗时更少，加载时间也很短。

Answer 2

我认为，这可能取决于您的项目。我在我的项目中使用以下流程（客户端[Angular] 应该跟随服务器）

(这里我用的是WEB API)

创建 : 最好return创建的Item如下

[HttpPost]
public ActionResult Post(Item item)
{
    if (everything is ok)
    {
        // resourceUrl: the address of the source that we have just created
        return Created(resourceUrl, item);
    }

    if (there is an error) {
        return BadRequest();
    }
}

要编辑 : 你不需要return任何项目，你应该return状态码（400[BadRequest]、200[OK]、204[NoContent] 等等）像下面这样：

[HttpPut("{id}")]
public ActionResult Put(Item item, int id)
{
    var existingItem = (retrive item form db based on id); 
    if (existingItem == null) {
        return BadRequest("Cannot update ...");
    } else {
        // update operation here ...
        return Ok();
    }
}

删除 - 你应该return状态码（400[BadRequest], 200 [确定]、204[NoContent] 等等）

编辑：

您不必遵循上述建议。您可以select您问题中的第一个建议（在执行操作后使用先前获取的数据更新局部变量。），这取决于您的项目。

Answer 3

我想这取决于你的应用。

显然第一种方法少了一个 api 调用并且速度更快。

但是假设你有一个高频度的其他用户对后端数据的操作。在那种情况下，在操作后刷新列表可能非常有用。

Angular CRUD - 在 add/update/delete 操作后刷新 UI

Angular CRUD - Refresh UI after add/update/delete operation

angular

rest

refresh

crud