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

（我将HttpClient的{{1}}用于服务）

我已经尝试了validateDelete方法的前三行，但无济于事。我在这里想念什么？我对Angular的掌握不好，所以请随时指出其他内容。

更新： HTML：

@angular/common/http

Answer 1

TL; DR：阅读有关订阅和主题的信息，以及有关如何在组件和服务之间建立通信的信息。您可以通过在执行成功的DELETE请求后发出GET请求，或通过在执行成功的DELETE请求后从列表中本地删除项目来更新UI。

长版：

一个想法可能如下：

如果您要进行更改，以便以后可以看到（例如99.9％的应用程序），则需要拨打后端电话。

如何更新UI类型取决于在进行了后端调用后如何进行操作。

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

根据此信息，您可以

1）通过遍历列表在列表中找到该项目并在本地将其删除（快速）

2）向后端发出另一个GET请求，并在成功删除之后显示新近更新的结果（比较安全，但是最终每次操作都会产生2个请求）。

如何处理“删除成功”问题取决于您的实现方式，但我将在下面与大家分享。

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

在拨打电话的服务上，您可以创建一个主题。您将使用此主题，通过 next 方法将所有更新通知给侦听器（意味着谁订阅了此事件）。

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

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

并为其创建一个吸气剂，如下所示：

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 $。）

现在，您的组件正在侦听服务的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.
        }
    });

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

Answer 2

编辑：我认为您在执行请求之前正在关闭模式。另外，假设您想在父级中而不是模式中获取列表。所以首先我要删除，隐藏模态，侦听在父级中被关闭的模态，然后重新获取列表...就像这样：

this.myService.deleteAAT(this.satNumber).subscribe(() => this.modalRef.hide());

然后在您的父母中，听皮革：

this.modalService.onHide.pipe(
  switchMap(() => this.myService.getAATList())
).subscribe(data => {this.AATList = data})

原始：

执行此操作时：

this.myService.deleteAAT(this.satNumber).subscribe();
this.getAatEntries();

getAatEntries()实际上是在删除完成之前触发的（很有可能），因此您需要链接这些请求，可以使用switchMap来实现：

this.myService.deleteAAT(this.satNumber).pipe(
  switchMap(() => this.myService.getAATList())
)
.subscribe((data: ISmt[]) => this.AATList = data);

Answer 3

您可以对模型使用onHidden事件（当向用户隐藏模式结束时触发），以按以下方式加载数据。

constructor(private modalService: BsModalService) {
    this.modalService.onHidden.subscribe(() => {
         // Fired when the modal has finished being hidden from the user
        this.getAATtEntries();
    });
}

confirmDelete(): void{
    this.myService.deleteAAT(this.satNumber).subscribe(() => { this.modalRef.hide(); });
}

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

3 个答案: