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} )
}

(我正在使用来自 @angular/common/http 的 HttpClient 服务)

我已经尝试了 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 了解 Subscriptions 和 Subjects 会对您有所帮助。我会按照上面提到的第二个选项来写。

在您调用电话的服务上，您可以创建主题。您将使用此主题通过 next 方法通知监听器(即订阅此事件的任何人)任何更新。

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

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$ 值，而不是私有(private) _deleteOperationSuccessfulEvent$。)

现在您的组件正在监听您的服务的 delete.. 事件。我们只需要采取行动。

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 的 Angular 来看，应该注意一些事项:

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

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

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