模板呈现字符串为[object object]

Question

我在ngOnInit中有代码来获取某些特定文本的翻译。它调用以下函数:

async getEmailTranslation() {
const email$ = this.translate.get('SUPPORT_TRANSLATE.EMAIL');
this.email = await firstValueFrom(email$);
console.log(this.email);
console.log(typeof this.email);
}

当我检查控制台时，我看到的是"电子邮件"。和";string"从两个console.log()语句返回，这正是我所期望的。

在模板中，当我渲染{{ this.email }}时，模板显示[object Object]而不是字符串。

email定义为:

email: string;

我错过了什么?

奇怪的是，另一个翻译，这是预期的工作:

async getWebsiteTranslation() {
const website$ = this.translate.get('SUPPORT_TRANSLATE.WEBSITE');
this.website = await firstValueFrom(website$);
}

在这种情况下，当在模板中显示{{ this.website }}时，它正确地呈现了我所期望的字符串。

Answer 1

您可能来自使用promise的不同框架。你当然可以用Promises来解决你的问题，但是Angular对observable(来自RxJS)非常固执。

可观察对象在处理异步操作的意义上类似于promise，但它们有一些关键的区别，其中最重要的可能是可观察对象不会"自动"运行。如果你不订阅它们(不像承诺，即使你不调用.then()或await也会运行)，并且可观察对象在完成之前可以发出多个值。

这里的"Angular方式"做事就是:

• 在html中公开一个public Observable。当前您正在尝试公开public email: string，但最好直接公开public email$: Observable<string>。

• 然后，在您的模板中，使用async管道来获取您的电子邮件的值。

html可能看起来像

<div *ngIf="email$ | async as email">
My email is {{ email }}.
</div>

*ngIf允许两件事:首先，div将不会显示，直到email$发出它的第一个值，所以你永远不会看到一个div只有"My email is ."或者"我的邮箱是[null]。"在这里。第二，使用"as"在语法中，它创建了一个名为email的变量，其值是email$发出的值，可以在声明*ngIf的div中使用。