Angular 2：数据表/HTML 表 - 第二次请求时不显示数据

Question

在 第二次 次或后续尝试请求数据时，我在 Angular 数据表或 HTML 表中显示数据时遇到问题（两者都尝试过）

第一次加载正常进行，但如果我导航到另一个页面然后返回，我会在表格中看到空白/没有数据。但是，JSON 数据被正确获取并显示在控制台中。此外，如果我直接在 div 中插入数据，JSON 会再次显示而没有任何问题。但同样不适用于表格。

这是我用过的sn-p：

组件 getDrugs.component.ts

ngOnInit()
{              
    this.adminService.getAllDrugs().subscribe(
       res => {
           this.data = res;
           console.log(JSON.stringify(res));          
           //return res;
       },
       err => {
           console.log("Error while retrieving existing Drug Details : " + err);
       }
   )
}       

服务 Drugs.service.ts

getAllDrugs(): any {
    console.log('getAllDrugs service invoked');

    return this.http.get(`${this.webApiBaseUrl}/GetDrugList`)
        .map(res => {                               
            console.log(res.json());
            return res.json();
        })
        .catch(error => {
            console.log(error);
            return Observable.throw(error);
        });                
}            

HTML 模板 getDrugs.html

<form>              
    <ba-card title="Drug Records">      
                 
        <div class="form-group" *ngIf="data">                        
            <table class="table table-bordered table-hover" [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage">
                <thead>
                    <tr>
                        <th style="width: 50%; font-weight:bold; font-size:larger; text-align:left;">
                            <mfDefaultSorter by="tradeName">Trade Name</mfDefaultSorter>
                        </th>
                        <th style="width: 50%; font-weight:bold; font-size:larger;">
                            <mfDefaultSorter by="comp">Composition</mfDefaultSorter>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let item of mf.data; let i = index">
                        <td style="width: 50%; text-align:left;">{{item?.tradeName}}</td>           
                        <td style="width: 50%;">
                            <table  *ngIf = "item.composition">
                                <tr *ngFor="let comp of item.composition">
                                    {{comp}}
                                </tr>
                            </table>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="4">
                            <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </ba-card>
</form>

Answer 1

您是否尝试将服务放入构造函数而不是 ngOninit() ？ 此外，您为什么使用 item?.composition 作为语法，因为您还检查了 *ngIf = "item.composition"

在正常的表使用中 then 被使用。