Angular - 删除后刷新/获取数据

Question

我在对 Angular 不太了解的情况下就开始了一个使用 Angular 的项目。我目前正在开发一个简单的 CRUD 屏幕。删除一行后，如何“刷新”UI？以下是我的组件中的方法：

    AATList:IAat[];

confirmDelete(): void{
    //this.myService.deleteAAT(this.satNumber).subscribe(data => {this.AATList = data;});
    //this.myService.deleteAAT(this.satNumber).subscribe(() => {this.getAATtEntries(); });
    this.myService.deleteAAT(this.satNumber).subscribe();
    this.getAatEntries();
    this.modalRef.hide();
}

getAATtEntries() {
    console.log("entries");
    this.myService.getAATList().subscribe(data => {this.AATList = data});
}

（在编辑时添加，在组件内部）：

openDeleteModal(template: TemplateRef<any>, satNumber: number) {
    this.satNumber = satNumber;
    this.modalRef = this.modalService.show(template, {class: 'modal-sm'});
  }

服务：

getAATList() {
    return this.httpClient.get<ISmt[]>(environment.ApiEndPoint + '/api/SMTDatas', {withCredentials:true});
}

deleteAAT(satNumber : number) {
    return this.httpClient.delete(environment.ApiEndPoint + '/api/SMTDatas/' + satNumber, {withCredentials:true} )
}

（我正在使用HttpClientfrom@angular/common/http的服务）

我已经尝试了confirmDelete方法中的前三行，但没有成功。我在这里缺少什么？我对 Angular 的掌握不好，所以请随意指出其他内容。

更新：HTML：

    <a class="text-danger" data-toggle="tooltip" data-placement="top" title="Delete" (click)="openDeleteModal(deleteTemplate, smt.SMTNumber)"><i class="fa fa-trash"></i>Delete</a>
...
    <ng-template #deleteTemplate>
      <div class="modal-body text-center">
        <p>Are you sure you want to delete this SAT?</p>
        <button type="button" class="btn btn-default" (click)="confirmDelete()" >Yes</button>
        <button type="button" class="btn btn-primary" (click)="denyDelete()" >No</button>
      </div>
    </ng-template>

Answer 1

注意：出于责任感，我在帖子下方添加了更新的信息，以提供稍微“更好”的见解

TL;DR：了解订阅和主题，以及如何在组件和服务之间建立通信。您可以通过在成功发出 DELETE 请求后发出 GET 请求来实现您想要的效果，或者在发出成功 DELETE 请求后通过从本地列表中删除项目来更新 UI。

更长的版本：

一个想法可以如下：

如果您做出了希望稍后能够看到的更改（例如 99.9% 的应用程序），您将需要进行后端调用。

如何更新 UI 取决于您在进行后端调用后希望如何继续操作。

因此，请考虑从列表中删除项目的情况。您发送针对该特定项目的删除请求，并收到来自后端的响应。此响应应该告诉您所做的删除操作是否成功。

根据这些信息，您可以

1）通过迭代找到列表中的项目并在本地删除它（更快）

2）成功删除后，向后端再次发出 GET 请求并显示新更新的结果（更安全，但最终每次操作都会发出 2 个请求）。

如何处理“删除是否成功”问题取决于您的实现，但我将在下面分享一个。

为此，阅读有关使用rxjs的订阅和主题会对您有所帮助。我将按照上面提到的第二个选项进行写作。

在您拨打电话的服务上，您可以创建主题。您将使用此主题通过使用下一个方法来通知侦听器（即订阅此事件的任何人）有关任何更新的信息。

在您的服务中，您可以按如下方式创建新主题：

private _deleteOperationSuccessfulEvent$: Subject<boolean> = new Subject();

并为其创建一个 getter，如下所示：

get deleteOperationSuccessfulEvent$(): Observable<boolean> {
    return this._deleteOperationSuccessfulEvent$.asObservable();
} 

当您收到 HTTP DELETE 请求的响应时，根据成功或失败，您可以发出 true 或 false 值，如下所示：

this._deleteOperationSuccessfulEvent$.next(true);

到目前为止，我们正在发出删除操作成功或失败的信息。

但还没有人听。因此，在您的组件中，您可以创建订阅：

deleteOperationSuccessfulSubscription: Subscription;

在您的 ngOnInit 方法中，您可以订阅在您的服务中创建的deleteOperationSuccessfulEvent$：

this.deleteOperationSuccessfulSubscription = this.yourService.deleteOperationSuccessfulEvent$.subscribe(...stuff will come here...);

（请注意，我们使用了deleteOperationSuccessfulEvent$值，而不是私有_deleteOperationSuccessfulEvent$。）

现在您的组件正在侦听服务的删除.. 事件。我们只需要采取行动即可。

this.deleteOperationSuccessfulSubscription = this.yourService.deleteOperationSuccessfulEvent$
    .subscribe(isSuccessful => {
        if (isSuccessful === true) { 
            make a GET request and display the returning data, following similar steps to which we followed so far 
        } else {
            delete operation was NOT successful, you can display an error or retry etc.
        }
    });

如果您有任何疑问，请告诉我。

更新：在执行所有这些操作时，从 Angular 和 rxjs 的角度来看，应该注意一些事情：

1-尽量不要.subscribe()在打字稿代码中使用 - 而是尝试使用.pipe()运算符来处理您的逻辑。相反，让 Angular 通过async pipe在模板中使用 来处理您的订阅。您可以添加.catchError(err => ...)在您的.pipe()以确保您发现错误并正确处理它们。

2- 如果您确实必须使用.subscribe()，请不要忘记取消订阅 中的该订阅ngOnDestroy() {...}。否则，您的应用程序将面临内存泄漏的风险。

ngOnDestroy() {
  this.mySubscription.unsubscribe();
}