Question

我正在ngOnInit()中调用服务，并在数据返回数据后将其分配给变量。

let sampleData = [1000, 2000, 3000, 4000];
if (this.job.currency !== 'USD') {
      this.jobService.getFxRate('USD', 'INR')
        .subscribe((fxRate) => {
          this.fxrate =  fxRate;
        });
}

在html表中，我正在调用使用该变量执行操作的方法

myfunction(index) {

   if(this.job.currency !== 'USD') {
      return  sampleData[index] / this.fxRate;
   } 
   else
   {
    return  sampleData[index];
   }
    
  }

<div *ngFor="let item of [0, 1, 2, 3, 4];let i = index"> {{ myfunction(i) }} </div>

但是console.log的前几条日志未定义，直到服务返回数据为止。我想在定义myfunction()后调用this.fxRate。我该怎么办？

Answer 1

this.fxrate的初始值为 undefined ，因此，您将在undefined中获得console。

在订阅

中获取数据后，便可以调用函数。

 if (this.job.currency !== 'USD') {
      this.jobService.getFxRate('USD', 'INR')
        .subscribe((fxRate) => {
          this.fxrate =  fxRate;
          this.myfunction();
        });
    }

如下更改功能

myfunction() {
   if(this.fxrate) {
     console.log(this.fxrate);
     // do something ....
   } 
 }

您可以使用 *ngIf

进行设置

一旦数据在您的 this.fxrate 变量中可用，它将执行您的功能

<div *ngIf="fxrate">
   <div *ngFor="let item of [0, 1, 2, 3, 4];let i = index"> {{ myfunction(i) }} 
 </div>
</div>

我希望这能解决您的问题：）

Answer 2

但是console.log在前几条日志中未定义日志，直到服务返回数据为止。定义this.fxRate之后，我想调用myfunction（）。我该怎么办？

您可以通过检查this.fxrate is defined并在订阅中调用函数来实现：

if (this.job.currency !== 'USD') {
  this.jobService.getFxRate('USD', 'INR')
    .subscribe((fxRate) => {
      this.fxrate = fxRate;
      if(this.fxrate) {
        this.myfunction();
      }
    });
}

如果仅在html模板中使用提取的数据，则可以使用async pipe。它订阅一个Observable或Promise并返回它发出的最新值：

if (this.job.currency !== 'USD') {
  this.fxrat = this.jobService.getFxRate('USD', 'INR');
}

<div *ngFor="let item of fxrate | async; let i = index"></div>

Answer 3

尝试以下HTML代码：

<span *ngIf="fxRate">
  <div *ngFor="let item of [0, 1, 2, 3, 4];let i = index">
    {{ myfunction(i) }} 
  </div>
</span>

StackBlitz Without Service Call

Answer 4

在Template中调用函数不是一个好方法。您还可以按照以下方式进行操作

    let sampleData = [1000, 2000, 3000, 4000]; 
    if (this.job.currency !== 'USD') { 
    this.jobService.getFxRate('USD', 'INR') .subscribe((fxRate) => { 
        this.fxrate = fxRate;
        this.items = [0, 1, 2, 3, 4].map(index => sampleData[index] / this.fxRate)
      });
 }

在模板中

 <div *ngFor="let item of items"> {{ item }} </div>

api调用完成在Angular中的数据提取后如何调用函数

4 个答案: