使用插值显示有关 HTML 的信息

Question

我需要帮助将用户的信息显示到 HTML 模板。但是，我无法弄清楚我做错了什么。基本上，我正在尝试做的是从数据库中获取值，将它们插入要显示的主页中。问题在于使用 ngFor，我不知道在我的情况下在哪里应用此标签。这是我的网页

<ion-header>
<ion-navbar>
<ion-title>DETALHES DA CONSULTA</ion-title>
<ion-buttons start>
<button ion-button (click)="dismiss()">
<span class="txt">Fechar</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="codigo">
Código de confirmação da consulta: <strong>99887</strong>
</div>
<ul>
<li class="categoria">
<h2>Consulta em cardiologia - Geral</h2>
<span>{{data?.agendaTeste?.Documento?.Especialidade}}</span>
</li>
<li class="data">
Agendado para <span>05/09/2018</span> às <span>14:30</span>
</li>
<li class="medico">
<span>Profissional executante:</span>
<strong>Dr. José M. - CRM-SP 0000/000</strong>
</li>
<li class="ubs">
<strong class="label">Local do atendimento:</strong>
<div>
<strong>Unidade:</strong> SIMUS<br>
<strong>Endereço:</strong> Alameda dos Lírios, 327
</div>
</li>
</ul>
<div class="cta">
<button class="btn btn-danger btn-block btn-rounded">
Cancelar consulta
</button>
<small>Caso não possa comparecer cancele ou reagende sua consulta.</small>
<button class="btn btn-outline-midblue btn-block btn-rounded">
Reagendar consulta
</button>
</div>
</div>
</ion-content>

这基本上是我的代码

constructor(public navCtrl: NavController, public modalCtrl: ModalController) {
var query = firebase.firestore().collection("agendaTeste")
var auxint = 0;
this.dataAux
let auxString = '[';
query.where('Documento.Paciente', '==', this.paciente).get().then(res => {
res.forEach(item => {
if (item.exists) {
auxint++;
auxString += '{"id":"' + item.id + '","agendaTeste":' + JSON.stringify(item.data()) + '}';
this.mostraHora = item.get("Documento.Hora");
console.log(this.mostraHora);
this.test = this.computeDateString(this.mostraHora);
this.medicoid = item.get("Documento.Medico");
this.especialidade = item.get("Documento.Especialidade");
this.unidade = item.get("Documento.UBS");
console.log(this.medicoid);
console.log(this.especialidade);                    
console.log(this.test);
console.log(this.unidade);
}
if (res.size != auxint)
auxString += ', ';
})
auxString += ']';
this.dataJSON = JSON.parse(auxString);
}).catch(err => {
console.log('Ocorreu um erro ' + err);
});
}

每当我尝试像这样呈现我的信息时，我都会得到一个空白页面，我尝试登录控制台，我试图向用户显示的信息并且一切都很好，所以可能我没有正确呈现 ngFor

Answer 1

<ion-content padding>
<div padding-top class="card">
<div class="codigo">
Código de confirmação da consulta: <strong>99887</strong>
</div>
<ul *ngFor="let data of dataJSON">
<li class="categoria">
<h2>Consulta em cardiologia - Geral</h2>
<span>{{data?.agendaTeste?.Documento?.Especialidade}}</span>
</li>
<li class="data">
Agendado para <span>05/09/2018</span> às <span>14:30</span>
</li>
<li class="medico">
<span>Profissional executante:</span>
<strong>Dr. José M. - CRM-SP 0000/000</strong>
</li>
<li class="ubs">
<strong class="label">Local do atendimento:</strong>
<div>
<strong>Unidade:</strong> SIMUS<br>
<strong>Endereço:</strong> Alameda dos Lírios, 327
</div>
</li>
</ul>
<div class="cta">
<button class="btn btn-danger btn-block btn-rounded">
Cancelar consulta
</button>
<small>Caso não possa comparecer cancele ou reagende sua consulta.</small>
<button class="btn btn-outline-midblue btn-block btn-rounded">
Reagendar consulta
</button>
</div>
</div>
</ion-content>

在 ul 元素中添加 *ngFor 后，我的问题得到了解决。