单击 Angular 中的删除按钮时，我的 table 行和列消失了？

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

我应该在删除函数中添加 return 类型和 return 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();
        }

单击 Angular 中的删除按钮时，我的 table 行和列消失了？

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

html

crud

resteasy

typescript

angular