角度插值显示[对象]

尝试使用JSON管道来查看真正的值。

<span class="md-menu-text">{{ (getNextStageName() || 'Not Available') | json }}</span>

所以你可以看到你的价值观有什么问题。

因此,看起来您在为API调用使用承诺,而不是Angular的HttpClientModule,后者使用rxjs并将解析后的JSON作为默认值返回。话虽如此,您可能需要解析promise中的json。。。

public async getNextStage(staffId) {
    const response = await API.service.send({
        reqType: 'get',
        req: `staff/history/next`,
        reqArgs: {id: staffId}
    });
    return response.json
}

与其绑定到函数,不如绑定到变量。

要在组件中声明一个变量,只需这样做:

nextStageName = 'Not Available';

在视图中绑定到它- {{nextStageName}}

服务返回值后,将其分配给此变量。

视图将显示“不可用”,直到服务获得新值。视图将自动更新。

下面是发生的事情:

你认为是一个 string 实际上是一个物体。使用字符串插值语法时( {{}} )Angular在模板中调用 toString 方法。使命感 托斯特林 在 Object 结果 [Object Object] .

因此,一旦从API获得响应,就需要确保在视图上打印什么内容。阶段名称可能是您实际从服务接收的响应数据上的一个字段值。

下面是一个模拟示例(利用JSONPlaceholder API),介绍了如何进行模拟:

import { Component } from '@angular/core';
import { StageService } from './stage.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  stageData: any; // This would be assigned an Object that your service method results

  constructor(private stageService: StageService) {}

  async ngOnInit () {
    this.stageData = await this.stageService.getStageData();
    // Log it to the console to see it's structure and look for the property you want to use on the UI.
    // For this specific example, the response data will have a name property that I'm using on the HTML(Template)
    console.log('Got the Stage Data as: ', this.stageData);
  }
}

在模板中:

<!--
  Here since the data is going to be assigned asynchronously 
  but the template would already be in the process of initialization, 
  I'm using the *ngIf directive to check. 
  If the stageData is still undefined, I'm displaying the elseBlock
-->
<div *ngIf="stageData; else elseBlock">
  <h1>Stage Name</h1>

  <p>Wrong Syntax: {{ stageData }} - Will print [Object object] as stageData is an Object and NOT A STRING</p>

  <p>Right Syntax: {{ stageData.name }}</p>
</div>

<ng-template #elseBlock>
  <h1>Loading...</h1>
</ng-template>

这里有一个 Sample StackBlitz 给你的裁判。

附言: 密切关注评论。

对于字符串插值,请记住:

var x = `my name is ${name}` // CORRECT
var x = `my name is ${{name}}` // INCORRECT