Angular 2 / .NET Core Progress bar

2019-08-22 23:22发布

问题:

I have this project going on where I make a call from my Angular 2 site to create some Entity entries in my database. The backend API takes about 2 minutes to finish the job and then return the result.

Currently I am displaying a loading animation on my frontend so the user knows that something is still going on. But because of the time needed I want to change this to a progress bar.

I know I can use Angular Material to implement a progress bar and I can update it with values to show the progress. My question however is the following:

After making the call to the backend API, how do I send updates (sort of a counter++ thing) to my frontend to update the progress bar?

// PUT: api/admin/lorem
[HttpPut]
[Route("route")]
public async Task<IActionResult> CreateAndCalculateStuff([FromBody]Model model) {
    var lorem = await ipsum(model);
    return NoContent(); 
    // NoContent is currently a placeholder, I want to place my counter++ here
}

回答1:

I recently saw an example of this which looked a bit wrong but i guess it worked. The example used two functions; one to kick off the initial functionality and the other to request the status of that functionality. So in CreateAndCalculateStuff() you can update a global variable and in the second you return that global variable.