Angularjs 打字稿等待函数结束运行另一个函数

Question

我正在 Angular CLI 中开发一个应用程序，我只想在插入后获得一个列表。经过一些研究，我已经阅读并尝试了很多东西(观察者/承诺/异步/设置超时/...(，但找不到正确的答案。我可能走不远。

这是我现在拥有的代码。在insertStatut((中，我正在执行插入(service.insertStatuts(((，并在getStatuts((之后更新列表。

这是我的组件中的代码：

import { Component, OnInit } from '@angular/core';
import { MatStatutService } from '../mat-statut.service';
import { MatStatut } from '../matStatut';
@Component({
selector: 'app-mat-statut',
templateUrl: './mat-statut.component.html',
styleUrls: ['./mat-statut.component.css']
})
export class MatStatutComponent implements OnInit {
private statuts: MatStatut[];
private inStatut = new MatStatut;
constructor(private service:MatStatutService) {
}
// get statuts at launch
ngOnInit() {
this.getStatuts();
}
// get list of statuts
public getStatuts(): void{
this.service.getStatuts().subscribe(posts => this.statuts = posts);
console.log(this.statuts);
}
// insert a new statut
public insertStatut():void{
this.inStatut.setLibelle('Test');
// insert new statut
this.service.insertStatut(this.inStatut);
// refresh list of statuts
this.getStatuts();
// reset insertion Statut
this.resetMatStatut(this.inStatut);
}
// reset statut
public resetMatStatut(statut: MatStatut){
statut.resetData();
}
}

这是我服务中的代码：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { MatStatut } from './matStatut';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class MatStatutService {
constructor(private http: HttpClient) {}
getStatuts(): Observable<MatStatut[]>{
return this.http.get<MatStatut[]>('http://localhost/rest/fonctions/matStatut/getAll.php');
}
insertStatut(statut: MatStatut) {
this.http.post('http://localhost/rest/fonctions/matStatut/create.php', {
mat_statut_libelle: statut.getLibelle()})
.subscribe(
res => {
console.log(res);
},
err =>{
console.log(err);
});
}
}

我希望我的解释足够清楚，并为我的英语不好而抱歉。

Answer 1

我认为问题出在 MatStatutService 的 inserStatus 上，您可以为此进行更改：

insertStatut(statut: MatStatut) {
return this.http.post('http://localhost/rest/fonctions/matStatut/create.php', {
mat_statut_libelle: statut.getLibelle()});
}

在组件中，您应该具有：

public insertStatut():void{
this.inStatut.setLibelle('Test');
// insert new statut
this.service.insertStatut(this.inStatut).subscribe(res => {
console.log(res);
// refresh list of statuts
this.getStatuts();
// reset insertion Statut
this.resetMatStatut(this.inStatut);
}

这可确保首先进行插入，然后获得更新的列表。

P.s是Angularjs而不是Angularjs。

Answer 2

斯蒂芬，你做错了很多事情

1.-一个服务，一般只能返回可观察量。如果你想检查一切正常，如果你使用的是Rxjx 6.0，你可以使用"pipe(tap("，如果你使用Rjxs 5.0，你可以使用"do">

insertStatut(statut: MatStatut) {
//just return httpPost
return this.http.post('http://localhost/rest/fonctions/matStatut/create.php', {
mat_statut_libelle: statut.getLibelle()}) //I use pipe.tap to show the result
.pipe(tap(res=>{console.log(res)}))
}

2.-是你的组件，当调用插入状态时，当你订阅可观察量时。并且位于您放置代码的"订阅"内。在订阅之外，您没有价值。

public insertStatut():void{
this.inStatut.setLibelle('Test');
// insert new statut
this.service.insertStatut(this.inStatut).subscribe(res=>
{ //You can do something with the response
//Or simply, call to Refresh de data
//But INSIDE subscribe
this.getStatuts();
this.resetMatStatut(this.inStatut);
};
// the lines below have no sense, they are OUTSIDE
//this.getStatuts();
//this.resetMatStatut(this.inStatut);
}

当然你的函数getStatus((必须是

public getStatuts(): void{
this.service.getStatuts().subscribe(posts => 
{ //Again console.log INSIDE
this.statuts = posts;
console.log(this.statuts);
})
}

注意：我只是算数，我说的和卢克斯一样:(