Angular2-刪除後更新UI

Question

我有一個angular2應用程序，其後端在java中。我有一個客戶名單。當我點擊刪除一個客戶，客戶被刪除，但列表不會更新。如果我手動刷新頁面，則列表更新。我嘗試路由到訂閱刪除方法中的列表組件，但這不起作用。

列表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

嘗試調用this.refreshCustomersList();在delete功能是這樣的：

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陣列。