Как использовать не итеративный наблюдаемый сервис данных

Question

У меня есть наблюдаемая служба данных, которую я хочу использовать на моей угловой странице.Большинство примеров, которые я видел, возвращают набор данных, которые можно поместить в таблицу или в цикл * ngFor.Но что, если у меня есть только 1 элемент данных, и он не является итеративным (это просто объект с одним полем)?Как мне вставить это на страницу?

Страница будет выглядеть примерно так:

<div [dataSource]=“source$”>
    {{ source$.data }}
</div>

Файл ts выглядит так:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { WatermelonService } from '../../../../providers/chat/watermelon.service';
import { Observable } from 'rxjs';

@Component({
selector: 'app-watermelon',
templateUrl: './watermelon.component.html',
styleUrls: ['./watermelon.component.scss']
})
export class WatermelonComponent implements OnInit {

source$ : Promise<void | Observable<Object>>;

constructor(private _activatedRoute : ActivatedRoute,
private _watermelonService : WatermelonService) { }

ngOnInit() {
const watermelonId = this._activatedRoute.snapshot.paramMap.get('id');
this.source$ = this._watermelonService.getWatermelon(true, watermelonId);
}

}

The WatermelonServiceвыглядит следующим образом:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from '../../../environments/environment';
import { HttpClient, HttpErrorResponse, HttpParams, HttpHeaders } from '@angular/common/http';
import { AuthService } from '../../core/auth.service';

@Injectable()
export class WatermelonService {


constructor(private http: HttpClient, public afAuth: AuthService) { }

getWatermelon(atb : boolean, watermelonId : string) {
const url = /* watermelonFunctions endpoint */
    
const options = /* options */
return this.http.get(url, options);
}
}

И, наконец, здесь конечная точка функций firebase, которая возвращает данные:

exports.getWatermelon = functions.https.onRequest((req, res) => {
db.doc(‘…’).get().then(watermelon => {
    res.status(200).send({data: watermelon.data});
});
}