Angular 2: таблица Datatable/HTML — данные не отображаются при повторном запросе

Я столкнулся с проблемой отображения данных в таблице 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

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


angular angular-datatables
person rondevon    schedule 12.08.2017    source источник
comment
Вы подписываетесь на наблюдаемое в методе ngOnInit, когда вы делаете новый запрос, у вас будет другое наблюдаемое, но ссылка в ngOnInit по-прежнему будет содержать предыдущую.   -  person Cristian Traìna    schedule 12.08.2017

Ответы (1)


arrow_upward
0
arrow_downward

Вы пытались поместить службу в конструктор, а не в ngOninit()? Кроме того, почему вы использовали item?.composition в качестве синтаксиса, потому что вы также проверили, что *ngIf = "item.composition"

В обычном использовании таблицы then используется then.

person Community    schedule 12.08.2017
comment
Используйте приведенный выше тег <table> как <pre>{{item.composition}}</pre>, чтобы проверить, существует ли он или нет.... - person ; 12.08.2017
comment
Да, я также пытался использовать службу в конструкторе. Но столкнулся с той же проблемой. - person rondevon; 13.08.2017