Angularjs typescript等待函数结束以运行另一个函数

我正在Angular CLI中开发一个应用程序，我只想在插入后获得一个列表。在一些研究之后，我阅读并尝试了很多东西（observer/promise/async/setTimeout/…），但没有找到正确的答案。我可能没走多远

这是我现在的代码。在insertStatuts（）中，我正在执行插入（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);
        });
  }
}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
从“/MatStatut”导入{MatStatut}；
从“rxjs”导入{Observable}；
@注射的({
providedIn:'根'
})
出口级MatStatutService{
构造函数（私有http:HttpClient）{}
getStatuts（）：可观察{
返回此.http.get（'http://localhost/rest/fonctions/matStatut/getAll.php');
}
插入状态（状态：MatStatut）{
this.http.post（'http://localhost/rest/fonctions/matStatut/create.php', {
mat_statut_libelle:statut.getLibelle（）}）
.订阅(
res=>{
控制台日志（res）；
},
错误=>{
控制台日志（err）；
});
}
}

---

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

我想问题出在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是有角度的，而不是有角度的。

斯蒂芬，有很多事情是你弄错的

1.-服务通常只能返回可观察到的内容。如果您想检查一切是否正常，如果您使用的是Rxjx 6.0，则可以使用“管道（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.-是您的组件，当调用insertStatus时，当您订阅Observable时。并且在“订阅”中，您可以在其中放置代码。在订阅之外，你没有任何价值

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（）必须是

---

注意：我只是记下一个数字，我说的和Luax一样：（

它是有角度的，不是AngularJS。

订阅

在这里被误用。它应该用在结果被消耗的地方。你真的没有使用你可以从中受益的可观察的功能。为了无缝链接，坚持承诺。它们可以作为异步使用。等等。问题没有显示你到底是如何使用它们的。它是It’我不太清楚你得到了什么结果，或者你期望得到什么结果。也许是问题，然后告诉我们。你尝试了什么调试？告诉我们。非常感谢，你的解决方案工作得很好。它真的很有帮助，我被困了两天。非常感谢你的解决方案。正如LuaXD首先回答的，我首先尝试了他的解决方案，但你已经完全做到了我也是。谢谢你抽出时间。

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