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中收听此事件并相应地更新您的阵列