Angular 4 - 从 table 中删除当前行

Question

我想通过单击删除 link 从 table 中删除当前行。

我使用下面的代码来显示数据

服务

getMembers(): Observable<any> {
  return this._http.get('http://localhost/membership/main/getUsers')
  .map(response => response.json() );
}

组件

members$: Observable<any[]>;

ngOnInit() {
  this.members$ = this._membersService.getMembers()
}

delete(id) {
 this._membersService.deleteUser(id);
}

html

<a (click)="delete(member?.id, i)">

听说拼接功能。但我找不到在 observable 中使用它的方法。

Answer 1

我想你这里的问题要大得多。

确实没有简单方法可以从 Observable<T[]> 持有的数组中删除一行 T。我建议你走正规路线：

members: any[];

ngOnInit(): void {
  this._membersService
    .getMembers()
    .subscribe(members => this.members = members);
}

delete(memberIndex: number): void {
  this.members.splice(memberIndex, 1);
}

<a (click)="delete(i)">

您想将结果数据保存在字段中的原因是您的模板。我打赌你的模板代码中有类似于 *ngFor="let member of members$ | async" 的内容。问题是此代码将导致在每个更改检测周期重新评估 members。这意味着，远程 API 将在完全没有必要的情况下被调用多次！

话虽如此，但我必须指出，如果您说您使用（比方说）@ngrx/store 进行数据管理，我的回答将完全不同。但是由于您的问题中没有提到这一点，我认为它不在画面中。

否则，您也可以使用 BehaviorSubject，但我不建议您在当前设置中这样做。最好将 BehaviorSubject 放在您的服务中并将其公开为 Observable.

Angular 4 - 从 table 中删除当前行

Angular 4 - remove the current row from a table

state-management

rxjs

angular