Question

我正在开发Angular CLI中的应用程序，我只想在插入后获取一个列表。经过一些研究，我已经阅读并尝试了很多东西（观察者/ promise / async / setTimeout / ...），但找不到正确的答案。我可能不会很远。

这是我现在的代码。在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是Angular而不是Angularjs。

Answer 2

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

1.-服务，通常只能返回Observables。如果你想检查一切都没问题你可以使用“管道（水龙头）”如果你使用的是Rxjx 6.0，或者“如果你使用Rjxs 5.0

”

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.-当您订阅Observable时，是否在调用insertStatus时是您的组件。并且INSIDE是您订阅代码的“订阅”。在外面订阅，你没有价值。

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

注意：我只是采取行动，我说的是Luax：（

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

2 个答案: