Question

在将用户信息显示到HTML模板时，我需要帮助。但是，我不知道我在做什么错。基本上我想做的是从数据库中获取值，将它们插值到要显示的主页中。问题是使用ngFor，我不知道在我的情况下将此标签应用于何处。这是我的HTML

<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 < / p>

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之后，我的问题解决了。

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

1 个答案: