Question

我希望函数等待字符串并返回它，因为它是出现在网页上的第一件事，否则它将留空。 getCompte（mat）：字符串{...}函数始终返回该“测试”并跳过第一条指令，我尝试了async-await，但它迫使我再次返回一个promise ..如何返回该字符串？

在组件中：

method1()

服务中：

getCompte(mat: number): string {
    this.compteService.getCompte(mat).then( res => {
      console.log('haho :' + res);
      return  res;
    });
    return 'test';
  }

我希望输出是该元素。标称值，但实际输出是“测试”。

Answer 1

按如下所示修改服务：

+---+----+-----+
|_1 |_2  |_3   |
+---+----+-----+
|1  |str1|1.111|
|2  |str2|2.222|
|3  |str3|3.333|
+---+----+-----+

然后在您的组件中，如下定义一个变量（以保存结果）：

getCompte():Promise<any> {
  return  this.http.get<compute[]>('http://localhost:3000/comptes').toPromise();
}

然后使用您的方法：

public result: string= null;

Answer 2

您应该在组件类中创建一个变量，例如text: string。返回Promise后，然后将响应设置为变量。

text: string;
getCompte(mat: number): void {
    this.compteService.getCompte(mat).then( res => {
        this.text = res as string;
    });

}

Answer 3

为什么不添加预加载器，直到获得实际输出，否则

创建一个主题并注册一个主题，而不是返回测试，例如在服务中

constructor(public http: HttpClient) { }// from @angular/core/http i guess not selenium one



 compte = new Subject<[]>();

    getCompteObs() {
       return this.compte.asObservable();
    }

    getCompte(mat: number) {

let comptes = [];

    this.http.get<compute[]>('http://localhost:3000/comptes').subscribe(res => {
          res.forEach(el => {
           this.comptes.push(el);
           });
         this.compute.next(comptes);
        });
      }

内部组件-

实现OnInit接口并在类内部

class abc implement OnInit() {

let recCon = []; //initially empty add preloader

constructor(public comptService: ComptService) { }

ngOnInit() {
this.comptService.getCompte(// pass mat: number);
  this.recCon = this.comptService.getCompteObs.subscribe(res => {
   this.recCon = res as [];
})
}

}

我希望对您有帮助

Answer 4

为什么在实际上不需要可观察对象时使用它。您可以改用简单的提取：

在组件中：

getCompte(mat: number): string {
    const comptes = await this.compteService.getCompte(mat);
  }

在服务中：

async getCompte(mat: number): Promise<any> {
    return await fetch('http://localhost:3000/comptes')
                      .then(response => response.json());
  }

Answer 5

如果不是必须的，我根本不会在这里涉及承诺。 HttpClient返回一个可观察值，所以让我们拥抱一下吧：）

然后，您可以在组件中手动订阅或使用async管道显示您的价值。

因此，根据以上情况，我建议使用async管道：

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// ...

getCompte(mat: number): Observable<string> {
  return this.http.get<Compte[]>('http://localhost:3000/comptes').pipe(
    map(res => {
      const match = res.find(r => r.mat === mat);
      return match ? match.nom : null
    })
  )
}

组件：

recon$: Observable<string> 

ngOnInit() {
  this.recon$ = this.comptService.getCompte(// pass mat: number);
}

然后，您可以在视图中使用异步管道显示此内容：

<p *ngIf="(recon$ | async) as recon">{{recon}}</p>

如何返回字符串，而不是Angular中的Promise？

5 个答案: