Angular2- 삭제 후 UI 업데이트

Question

나는 자바에 백엔드가있는 angular2 앱을 가지고 있습니다. 고객 목록이 있습니다. 고객을 삭제하기 위해 클릭하면 고객이 삭제되지만 목록은 업데이트되지 않습니다. 수동으로 페이지를 새로 고치면 목록이 업데이트됩니다. 내가 삭제 방법의 가입 목록 구성 요소에 라우팅을 시도했지만 그 작동하지 않습니다.

리스트 customers.component.html

<tr [class.warning]="customer.isDefault == 1" *ngFor="let customer of customers | orderBy:['firstName'] | search:searchCustomer.value;let serial = index"> 
       <td>{{ serial+1 }}</td> 
       <td>{{ customer?.firstName+' '+customer?.lastName}}</td> 
       <td>{{ customer.email}}</td> 
       <td>{{ customer.mobileNumber}}</td> 
       <td>{{ customer.streetAddress}}</td> 
       <td>{{ customer.priceList?.name}}</td> 
       <td><a [routerLink]="['/loggedIn','customer','edit', customer.id ]"><i class="fa fa-edit fa-2x"></i></a></td> 
       <td><a (click)="delete(customer)"><i class="fa fa-trash-o fa-2x"></i></a></td> 
       </tr> 

리스트 customers.component.ts

ngOnInit() 
    { 
     this.refreshCustomersList(); 
    } 

    delete(customer) 
    { 
     this.userService.delete(customer.id) 
      .subscribe(
       success=> 
       { 
        var index = this.customers.indexOf(customer, 0); 
        if (index > -1) 
        { 
         this.customers.splice(index, 1); 
        } 
       } 
      ) 

    } 

    refreshCustomersList() 
    { 
     this._authHttp.get(
       this.appService.getApiUrl() + "api/customer/list" 
      ) 
      .map(res=>res.json()) 
      .subscribe(
       successResponse=> 
       { 
        this.customers = successResponse.data.customers; 
       }, 
       () => console.log("Request Completed") 
      ) 

    } 
} 

Answer 1

이처럼 delete 기능에 this.refreshCustomersList();를 호출보십시오 :

delete(customer) 
{ 
    this.userService.delete(customer.id) 
     .subscribe(
      success=> 
      { 
       var index = this.customers.indexOf(customer, 0); 
       if (index > -1) 
       { 
        this.customers.splice(index, 1); 
        this.refreshCustomersList(); 
       } 
      } 
     ) 

} 

그러면 고객이 제거 된 후 customers 어레이가 업데이트됩니다.