Angular 角度插值显示[对象]

在我的Angular应用程序中，我正在调用API以获取下一阶段的信息。一旦我有了它，我就会解析出名称，这样我就可以将它打印到视图中。我在这个函数中使用了async/await

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

---

在这种情况下，为什么我的插值显示的是[Object Object]，而不是常规值？

尝试使用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}中绑定到它

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

---

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

下面是发生的情况：

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

这是给你的裁判的一封信

---

PS：请密切注意评论。

尝试使用json管道检查您得到了什么。{{getNextStageName | | |'不可用'| json}}没有回答您的问题，但我有这个[Object]问题，但我使用的是rxjs主题。我不得不添加异步管道$mymessage | async这不是答案。应该是注释。好的，如果是这样的话，那么为什么我要这样做：public async getNextStageName{let stage=Nothing；console.logtypeof stage；return stage；}。。。我是否仍在视图中打印[Object]？typeof的console.log将其显示为字符串。那么这里发生了什么？您将无法在HTML上使用stage，因为它是在getNextStageName函数中声明的局部变量。因此，它的作用域将仅限于使用let声明的getNextStageName函数。另一件事，它的类型是在函数中显示字符串，因为它是函数中的字符串。但由于它是一个异步函数，因此从这个函数返回的任何内容都可能被包装为一个可观察的对象。如果这是您的实现，那么让我为您更新答案和stackblitz。但是，是的，如果您从中返回一个字符串，这是本地的，那么为什么要将其声明为异步函数呢。只要从那里删除async关键字，就可以很好地继续了。另一个可能存在的问题是，您没有在模板中调用该方法-您可能正在执行{{getNextStageName}}，而您本应该执行{{getNextStageName}}，所以，我肯定一直在执行{{getNextStageName | | not Available}。那么，在所有这些之后，您是说我的原始实现减去async和await将起作用吗？请澄清。如果字符串是本地的，并且您在getNextStageName方法中使用let关键字声明它，那么是的，您可以简单地从函数中删除async关键字，然后像这样调用模板上的方法：{{getNextStageName}}，您应该可以开始了。我已经用同样的方法更新了我的stackblitz。请随意查看。