Итерация по подколлекции и документам - angularfirestore

Question

Пытаюсь получить доступ к вложенной коллекции из пожарного хранилища, у меня есть все значения в переменной данных, когда я пытаюсь распечатать значения, появляется ошибка InvalidPipeArgument: '[объект объекта]' для канала 'AsyncPipe'

«Данные» из приведенного ниже фрагмента кода имеют следующие значения

      data:{
      "Kids Pool":           
     {"Chlorine":"Present","Color":"Nil","Turbidity":"Nil","pH":"Neutral"},
     "Main Pool": 
      {"Chlorine":"Nil","Color":"Green","Turbidity":"Yes","pH":"7"},
      "id":"Swimming Pool"}

   this.dieselGeneratorCollections = 
   this.afs.collection('apartments/1001- 
   SJR Verity/Daily Readings');  
   this.posts = this.dieselGeneratorCollections.valueChanges();
   this.dailyReadings = 
   this.dieselGeneratorCollections.snapshotChanges().pipe(
    map(actions => {
      return actions.map(a => {
        const data = a.payload.doc.data() as any;
         data.id = a.payload.doc.id;
         console.log("data:"+JSON.stringify(data) );
        return data; 
      });
    }));

В моем HTML-коде я пытаюсь напечатать значения для идентификатора «Плавательный бассейн»,

 <ul *ngFor="let dailyReading of dailyReadings | async">     
  <strong>{{ dailyReading.id }}</strong>
 <ul *ngIf = "dailyReading.id == 'Diesel Generator'"  >
       <ul>  <strong>Diesel Leval: {{ dailyReading.dieselLevel }}</strong> 
 </ul>
        <ul>  <strong>Energy Reading: {{ dailyReading.energyReading }} 
 </strong></ul>
       <ul>   <strong>Running Hours: {{ dailyReading.runningHours }} 
 </strong></ul>
 </ul>

<ul>   <strong>Running Hours: {{ dailyReading.KidsPool }}</strong></ul>
<div *ngFor="let swimmingPool of dailyReading.KidsPool | async" >
    <strong>Chlorine: {{ swimmingPool.Chlorine }}</strong>
</div>      
</ul>

как мне распечатать значения «swimPool»