Question

在我的Angular应用程序中，我正在调用API以获取一些“下一步”信息。一旦知道了，我就会解析名称，以便可以将其打印到视图中。我正在此功能内使用异步/等待。

我看到的是[Object Object]，而不是在视图中打印“ stage”的字符串值。

在这种情况下，为什么我的插值显示的是orgName := "org_name2" condition := fmt.Sprintf("%s", orgName) + ".%" query := fmt.Sprintf("SELECT name FROM sessions WHERE name ILIKE '%s'", condition)而不是“常规”？

Answer 1

因此，似乎您在对API调用使用了promise，而不是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
}

Answer 2

绑定到变量，而不是绑定到函数。

您需要做的就是在组件中声明一个变量，如下所示：

nextStageName = 'Not Available';

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

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

在服务获得新值之前，视图将显示“不可用”。该视图将自动更新。

Answer 3

所以这是正在发生的事情

您认为是string的属性实际上是一个对象。当您在模板中对其使用字符串插值语法（{{}}）时，Angular会在其上调用toString方法。在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。

PS：。请密切注意评论。

Answer 4

尝试使用JSON管道进行管道传输以查看实际值。

await puppeteer.launch(options);

所以您可以看到您的价值出了什么问题。

角插值显示[对象对象]

4 个答案: