I'm struggling to display user information on my HTML template. I can't seem to figure out what I'm doing wrong. Essentially, I want to retrieve values from the database and dynamically insert them into the main page for display. My issue lies with using ngFor; I'm not sure where to properly apply this tag in my scenario. The following is an excerpt from my HTML:
<ion-header>
<ion-navbar>
<ion-title>CONSULTATION DETAILS</ion-title>
<ion-buttons start>
<button ion-button (click)="dismiss()">
<span class="txt">Close</span>
<ion-icon ios="ios-close" md="md-close"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<div padding-top class="card" *ngFor="let data of dataJSON">
<div class="code">
Consultation Confirmation Code: <strong>99887</strong>
</div>
<ul>
<li class="category">
<h2>Cardiology Consultation - General</h2>
<span>{{data?.agendaTeste?.Document?.Specialty}}</span>
</li>
<li class="date">
Scheduled for <span>05/09/2018</span> at <span>14:30</span>
</li>
<li class="doctor">
<span>Attending Physician:</span>
<strong>Dr. José M. - CRM-SP 0000/000</strong>
</li>
<li class="clinic">
<strong class="label">Location of Consultation:</strong>
<div>
<strong>Facility:</strong> SIMUS<br>
<strong>Address:</strong> Alameda dos Lírios, 327
</div>
</li>
</ul>
<div class="cta">
<button class="btn btn-danger btn-block btn-rounded">
Cancel Consultation
</button>
<small>If unable to attend, please cancel or reschedule your appointment.</small>
<button class="btn btn-outline-midblue btn-block btn-rounded">
Reschedule Consultation
</button>
</div>
</div>
</ion-content>
This represents my code structure.
constructor(public navCtrl: NavController, public modalCtrl: ModalController) {
var query = firebase.firestore().collection("agendaTeste")
var auxint = 0;
this.dataAux
let auxString = '[';
query.where('Document.Patient', '==', this.patient).get().then(res => {
res.forEach(item => {
if (item.exists) {
auxint++;
auxString += '{"id":"' + item.id + '","agendaTest":' + JSON.stringify(item.data()) + '}';
this.showTime = item.get("Document.Time");
console.log(this.showTime);
this.test = this.computeDate(this.showTime);
this.doctorId = item.get("Document.Doctor");
this.specialty = item.get("Document.Specialty");
this.facility = item.get("Document.Facility");
console.log(this.doctorId);
console.log(this.specialty);
console.log(this.test);
console.log(this.facility);
}
if (res.size != auxint)
auxString += ', ';
})
auxString += ']';
this.dataJSON = JSON.parse(auxString);
}).catch(err => {
console.log('An error occurred ' + err);
});
}
Despite logging the information correctly in the console, when attempting to render it as shown above, I end up with a blank page. It seems like there might be an issue with how I'm utilizing ngFor.