Question

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

第一次加载恰当，但是如果我导航到另一个页面然后回来，我会在表格中看到空白/无数据。但是，JSON数据被正确地提取并显示在控制台中。此外，如果我直接在div中插入数据，则再次显示JSON而没有任何问题。但同样不能使用表格。

这是我用过的代码段：

组件 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

＆＃13;

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

＆＃13;

Answer 1

您是否尝试将服务放置到构造函数而不是ngOninit（）？另外，为什么你使用item。.composition作为语法，因为你还检查了* ngIf =“item.composition”

在正常的表使用中然后使用。

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

1 个答案: