Установить минимальное количество строк в таблице угловых материалов - PullRequest
Новая
       106

Установить минимальное количество строк в таблице угловых материалов

2 голосов
/ 05 октября 2019

Я пытаюсь отобразить угловой угловой стол с минимальной высотой. Если данных нет, я бы хотел, чтобы они просто отображали пустые строки.

Я видел эту статью Таблица угловых материалов задает количество строк по умолчанию

Но я не буду знать количество строк, поскольку дисплей отзывчивый. Кто-нибудь еще решил это? Я еще ничего не нашел.

РЕДАКТИРОВАТЬ Кажется, возможно, я не был ясен по этому вопросу, поскольку все ответы на самом деле не подходят.

Iхотел бы иметь возможность иметь размер или контейнер размера ответа (может быть, сам элемент таблицы). Контейнер будет расти и уменьшаться по вертикали, если размер страницы изменяется по вертикали. Количество видимых строк (есть данные для них или нет) также должно увеличиваться или уменьшаться в зависимости от доступной высоты таблицы / контейнера

Спасибо

Ответы [ 3 ]

0 голосов
/ 05 октября 2019

Сначала установите значения нумерации таблиц матов, при этом первое значение в "pageSizeOptions" будет количеством отображаемых строк по умолчанию. 

<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

При этом вы всегда будете отображать 5 строк на каждой странице, какмы указали выше.

Это пример кода, как вы могли бы генерировать «фиктивные» данные, если ваши динамические данные пусты 

    private getData() {
       const EMPTY_DATA: PeriodicElement[] = [
          {position: null, name: null, weight: null, symbol: null},
          {position: null, name: null, weight: null, symbol: null},
          {position: null, name: null, weight: null, symbol: null},
          {position: null, name: null, weight: null, symbol: null},
          {position: null, name: null, weight: null, symbol: null}
       ];

       this.dataSource.data = EMPTY_DATA;
       this.dataService.getAll().subscribe(data => {
          if (!data) return;
          this.dataSource.data = data;
    }
0 голосов
/ 05 октября 2019

Я бы сделал что-то вроде этого:

ts 

getData() {
  this.service.getData().subscribe(r => {
    const minLength = window.innerHeight / x; // x is your row height
    if (!r) {
      r = new Array(minLength);
    } else {
      if (r.length < minLength) {
        r.push(...new Array(minLength - r.length))
      }
    }
    this.dataSource.data = r;
  });
}

Примечание: чтобы использовать это, я рекомендую использовать оператор безопасной навигации:

https://angular.io/guide/template-syntax#safe-navigation-operator

Если ваш API всегда возвращает массив, и если нет данных, он возвращает [], вы можете удалить первый, если еще. 

getData() {
  this.service.getData().subscribe(r => {
    const minLength = window.innerHeight / x; // x is your row height
    if (r.length < minLength) {
      r.push(...new Array(minLength - r.length))
    }
    this.dataSource.data = r;
  });
}
0 голосов
/ 05 октября 2019

Установите по крайней мере 5 пустых строк по умолчанию, если данные равны 1, затем установите количество пустых строк равным 4, проверив количество имеющихся строк данных

...