當我單擊 Angular 中的刪除按鈕時，我的表格行和列消失了？

Question

當我單擊刪除按鈕使用 delete UserById API 刪除一行時，我的所有行和列都消失了，但是當我刷新頁面時，我將它們取回並且刪除的行仍然被刪除（這很好），但我不想要我的其他行點擊刪除后數據消失，必須刷新才能恢復。 我該如何解決？

鍵入腳本

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>

刪除 API 后端*

@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

我應該添加一個返回類型並在刪除函數中返回 allUsers 方法。

編輯了以下代碼：

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