Observable in Angular returns [ Object object ]

Question

I am new to Angular. I saw similar questions here but still cant get the point. In my service i have:

banner(): Observable<String> {
    return this.http.get<String>(`${SERVER_API_URL}/api/banner`);
}

In component:

ngOnInit() {
    this.principal.identity().then(account => {
        this.account = account;
    });

    this.registerAuthenticationSuccess();
    this.craCoreService.banner().subscribe(value => this.banner = value);
}

And html:

<div class="alert alert-warning" *ngSwitchCase="false">
   {{banner}}
</div>

My service method returns simple JSON object with single String property called "banner". But in UI i always get [Object object]. I do not understand how to get value from it . Appreciate any help, thank you.

Answer 1

如果它是带有banner属性的对象，那么您需要在TS代码中使用该use属性

this.craCoreService.banner().subscribe(value => this.banner = value.banner);

Answer 2

使用json管道在模板中显示对象。

<div class="alert alert-warning" *ngSwitchCase="false">  {{banner | json}}</div>