My table rows and columns disappear when I click delete button in Angular?

Question

When I click the delete button to delete a row using delete UserById API, all my rows and columns disappear but when I refresh the page I get them back and the deleted row remains deleted(which is good) but I don't want my other data to disappear upon clicking delete and have to refresh to get them back. How do I fix this?

type script

export class SearchDeleteComponent implements OnInit {

public deleteUser(num:number){
  let resp=this.service.deleteUser(num);
  resp.subscribe((data)=>this.users=data);
}

html

<div class="container">

    <div class="row col-md-6 col-md-offset-2 custyle">
    <table class="table table-striped custab">
    <thead>
        <tr>
            
            <th>Full Name</th>
            <th>Date Of Birth</th>
            <th>Gender</th>
           
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let user of users">
          
            <td>{{user.firstName+ '  '+ user.lastName}}</td>
            <td>{{user.dob}}</td>
            <td>{{user.gender}}</td>
         
            <td class="text-center"><button class="btn btn-danger btn-xs" (click)="deleteUser(user.num)"><span class="glyphicon glyphicon-remove"></span> Delete</button></td>
           
          </tr>
    </tbody>
    </table>
    </div>

Delete API back-end*

@Stateless
public class ManageUserBean  {
    
    
    
        
           @PersistenceContext(unitName = "users")
            private EntityManager entityManager;
           

   @TransactionAttribute(TransactionAttributeType.REQUIRED)
            public void deleteUser(int num) throws Exception {
                try {
                    System.out.println("num : " + num);
                    Query q = entityManager.createQuery("SELECT u FROM User u where u.num = :num");
                    q.setParameter("num", num);
                     
                    entityManager.remove(entityManager.merge(q.getSingleResult()));
                   entityManager.flush();
                } catch (Exception e) {
                    System.out.println(e);
                }

            }

@Stateless
@Path("/{versionID}/example/")
public class ExampleAPI {

    @EJB
    ManageUserBean manageUserBean;
    

    
         @Context
        private UriInfo context;
    
        @DELETE
        @Path("/users/delete/{num}")
        @Produces(MediaType.APPLICATION_JSON)
        public void deleteMessage(@PathParam("num") int num) throws Exception {
           manageUserBean.deleteUser(num);
        }
     

Answer 1

I should add a return type and return the allUsers method in the delete function.

Edited the following code:

@TransactionAttribute(TransactionAttributeType.REQUIRED)
            public List<User> deleteUser(int num) throws Exception {
                try {
                    System.out.println("num : " + num);
                    Query q = entityManager.createQuery("SELECT u FROM User u where u.num = :num");
                    q.setParameter("num", num);
                    
                    
                     
                    entityManager.remove(entityManager.merge(q.getSingleResult()));
                    entityManager.flush();
                    return (List<User>) q.getResultList();

                } catch (Exception e) {
                    System.out.println(e);
                    return null;
                }

  @DELETE
        @Path("/users/delete/{num}")
        @Produces(MediaType.APPLICATION_JSON) 
        public List<User> deleteMessage(@PathParam("num") int num) throws Exception {
            manageUserBean.deleteUser(num);
            return manageUserBean.allUserss();
        }