Angular 2：更新來自服務的組件視圖

Question

我有一個組件，顯示了從服務中檢索到的變體列表，如您在此處所看到的。

export class SellingMenuVarietiesComponent implements OnInit { 
    varieties: Variety[]; 

    constructor(public sellingMenuService: SellingMenuService) { } 

    ngOnInit(): void {   
     this.getVarietyList(); 
    } 
    // Get Variety List 
    getVarietyList(): void { 
     this.sellingMenuService.getVarieties().subscribe(res => { 
      this.varieties = res; 
     }); 
    }  
} 

我有另外一個組件，消除品種，如下所示：

export class SellingVarietyEditComponent implements OnInit { 
    constructor(private sellingMenuService: SellingMenuService) { } 

    // Remove variety 
    removeVariety(id: number) {   
     this.sellingMenuService.removeVariety(id).subscribe(res => { 
      this.sellingMenuService.getVarieties(); 
     });   
    } 
} 

在這個例子中，這兩個組件在頁面上可見在同一時間，所以當你刪除一個品種，我希望列表自動更新並反映。目前，該品種將成功從數據庫中刪除，但將保留在列表中，直到我刷新頁面。從SellingVarietyEditComponent的removeVariety()函數中注意到，我從我的服務中重新調用getVarieties()方法，試圖讓列表更新，但它不起作用。

我在做什麼錯？我怎樣才能做到這一點？

下面是該服務的相關功能：

@Injectable() 
export class SellingMenuService { 
    // Get Variety List 
    public getVarieties(): Observable<any> { 
     return this.http.get(this.varietyList).map(response => {    
      return response.json(); 
     }, (error: any) => { 
      console.log(error); 
     }); 
    } 
    // Remove Variety 
    public removeVariety(varietyId: any): Observable<any> { 
     return this.http.get(this.removeVarietyUrl + varietyId).map(response => { 
      return response; 
     }, (error: any) => { 
      console.log(error); 
     }); 
    } 
} 

編輯：

試圖EventEmitter溶液：

在SellingMenuService，我加入這個代碼（請注意，我加入this.updateVarietyList.emit(null);到getVarieties()）：

@Output() updateVarietyList: EventEmitter<any> = new EventEmitter(); 

// Get Variety List 
public getVarieties(): Observable<any> { 
    return this.http.get(this.varietyList).map(response => {    
     this.updateVarietyList.emit(null); 
     return response.json(); 
    }, (error: any) => { 
     console.log(error); 
     // TODO: implement error handling here. 
    }); 
} 

SellingVarietyEditComponent，我的刪除按鈕看起來是這樣的：

<a class="remove-button" (click)="removeVariety(varietyId)" (updateVarietyList)="onVarietyListUpdate($event)" >Remove</a> 

最後在SellingMenuVarietiesComponent我加了這一點：

onVarietyListUpdate() { 
    console.log('test'); 
    this.getVarietyList(); 
} 

此代碼但不起作用。我沒有得到任何錯誤，但是onVarietyListUpdate()方法從不執行。我在正確的道路上嗎？我怎樣才能解決這個問題？我發現的例子令人困惑，我無法將它們應用於我的代碼。

Answer 1

我剛剛意識到您擁有不同的組件。所以解決方案實際上會改變但我仍然保留舊的解決方案，如果您將來需要解決這些問題，您可以更好地解決問題。

新的解決方案

您可以組件interactions.service。TS，在

updateVarieties = new Subject(); 
updateVarieties$ = this.updateVarieties.asObservable(); 
getVarieties(){ 
this.updateVarieties.next(); 
} 

在這裏，

export class SellingMenuVarietiesComponent implements OnInit { 
    varieties: Variety[]; 

    constructor(private ciService:ComponentInteractionService, public sellingMenuService: SellingMenuService) { } 

    ngOnInit(): void {   
     this.ciService.updateVarieties$.subscribe(()=> { 
      this.getVarieyList(); 
     }); 
    this.getVarietyList(); 
    } 
    // Get Variety List 
    getVarietyList(): void { 
     this.sellingMenuService.getVarieties().subscribe(res => { 
      this.varieties = res; 
     }); 
    }  
} 

在編輯組件，

export class SellingVarietyEditComponent implements OnInit { 
    constructor(private ciService:ComponentInteractionService, private sellingMenuService: SellingMenuService) { } 

    // Remove variety 
    removeVariety(id: number) {   
     this.sellingMenuService.removeVariety(id).subscribe(res => { 
      this.ciService.getVarieties(); 
     });   
    } 
} 

老辦法：如果是單身組件處理編輯，並顯示

事情你需要用新數據更新UI嗎？ 這樣做的一種方式是在刪除品種後，用後端的成功響應返回更新後的品種。

因此，我打開了removeVariety API，使用id執行刪除操作，並且在後端執行類似於varieties.getAll（）的操作，並在成功響應中發送更新的變體。然後你只要做

this.varieties = res; 

這對於前端來說很簡單。

另一種方法是在點擊刪除API之前將ID保存在變量中。 現在你必須要刪除的ID，你打的API，它是成功的，然後你做

export class SellingVarietyEditComponent implements OnInit { 
constructor(private sellingMenuService: SellingMenuService) { } 

// Remove variety 
removeVariety(id: number) { 
    let deleteItemId = id; 

    this.sellingMenuService.removeVariety(id).subscribe(res => { 
     if(res.status=="SUCCESS"){ /* check if it was successful.(Good practice to include that in API Response*/ 
     this.deleteItemById(deleteItemId); 
     } 
    });   
    } 

deleteItemById(id:number){ 
this.varieties.forEach((value)=> { 
    if(value.varietyId==id){ 
     let index = this.varieties.indexOf(value); 
     if(index>-1){ 
     this.varieties.splice(index, 1); 
     } 
    } 
}); 
} 

我認爲這不是一個好主意，再次調用getVarieties。在你的代碼中，爲什麼它不起作用是因爲它返回了一個observable，而你沒有訂閱並更新這個Variant數組。如果你仍然想調用get API。你可以做的

this.getVarietyList(); 

代替

this.sellingService.getVarieties(); 

，並再次使該功能在編輯組件一樣，你在其它部件都有。

Answer 2

當您刪除/更新variety時，您可以在SellingMenuService中使用EventEmitter發出事件。在SellingMenuVarietiesComponent中收聽此事件並相應地更新您的陣列