Angular CRUD-添加/更新/删除操作后刷新UI

2024-05-19 • 问答

我想知道从Angular中的CRUD执行添加/更新/删除操作时刷新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请求以获取更新的数据。

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

（这里我使用 WEB API ）

要创建：最好按如下所示返回创建的项目

[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();
    }
}

要编辑：不需要返回任何项目，您应该返回状态码（ 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();
    }
}

要删除-您应该返回状态码（ 400 [BadRequest]， 200 [确定]， 204 [NoContent]等）

编辑：

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

第一种方法更可取，它比第二种方法耗时少，因此加载时间短。

我认为这取决于您的应用程序。

很明显，第一种方法是更少的api调用，并且速度更快。

但是假设您有其他用户对后端数据进行大量操作。在这种情况下，操作后刷新列表可能非常有用。

Angular CRUD-添加/更新/删除操作后刷新UI

leqihuan 回答：Angular CRUD-添加/更新/删除操作后刷新UI

大家都在问