ngx-datatable - строки не отображаются должным образом в наборе вкладок - PullRequest
Новая
       10

ngx-datatable - строки не отображаются должным образом в наборе вкладок

0 голосов
/ 23 октября 2018

У меня есть угловой компонент (компонент страны) с 3 дочерними компонентами в виде Tab (Штаты, Население, Отрасли).Родительский компонент имеет выпадающий список, например «Список стран», который управляет данными, которые будут отображаться на вкладке.При загрузке в раскрывающемся списке стран ничего не будет выбрано, а на вкладку состояний будет загружено 0 строк в списке состояний.

Я использую @ swimlane / ngx-datatable для таблицы списка состояний.

Когда я выбираю страну (например, Индия), таблица списка состояний будет заполнена (29 строк).Пока все работает нормально.

Когда я перехожу на другую вкладку («Население» или «Отрасли») и меняю страну (с 10 штатами), затем перехожу к таблице состояний, в которой отображается только 1 строка (первая строка)таблица со списком состояний.

Нижний колонтитул показывает точное число в обоих случаях.

Почему это происходит?Любая проблема с ngx-datatable.?

Родительский компонент: 

<tabset>
	<tab heading="States">
		<app-states>
		</app-states>
	</tab>
	<tab heading="Population">
		<app-Population>
		</app-Population>
	</tab>
	<tab heading="Industries">
		<app-Industries>
		</app-Industries>
	</tab>
</tabset>

Форма макета: enter image description here

1 Ответ

0 голосов
/ 11 января 2019

Эта проблема может быть решена с использованием логического параметра, как показано ниже:

MyComponent.ts 

    export class MyComponent implements OnInit{
        IsDataReady:boolean
        mydata=[];

        constructor(private _myService:myService){
            this.IsDataReady=false;
        }

        ngOnInit() {
            this.LoadData();    
        }

        LoadData(){
            this.IsDataReady=false;
            //Get data from service
            this._myService.getData().subscribe(data=>{
                this.mydata=data;
                this.IsDataReady=true;
            }
        }
    }

добавьте логическую переменную в * ngIf, как показано ниже

MyComponent.html 

    <ngx-datatable #data class="material" *ngIf="IsDataReady">
    </ngx-datatable>
...