Как узнать, сколько элементов видно на экране, если MatSelctionList?

Question

Я хочу знать в коде, сколько предметов показано в списке выбора материалов на экране.

Я пытался использовать:

@ViewChild(MatSelectionList) matSelectionList: MatSelectionList;

Но я не видел ни одной переменной или функции с этой информацией. У кого-нибудь есть подобная проблема?

Цель этого проста: у меня в приложении есть файловый менеджер, и когда я go повышаю уровень, мне нужно знать, сколько элементов есть.

Answer 1

Класс MatSelectionList предлагает переменную options, которая отображает текущие параметры в списке выбора.

Из документации API для MatSelectionList:

options: QueryList<MatListOption>

Компоненты опций, содержащиеся в этом списке выбора.

Класс QueryList является классом из пакета @angular/core и задокументирован в Документы API Angular .

Вот описание QueryList класса:

Неизменяемый список элементов, которые Angular поддерживает на сегодняшний день, когда состояние приложения изменяется.

Вот пример того, как получить доступ к текущему списку параметров:

<mat-selection-list #filesList>
  <mat-list-option *ngFor="let file of files">
    <!-- ... -->
  </mat-list-option>

export class MyComponent {
  @ViewChild('filesList', { static: true }) filesList: MatSelectionList;

  getOptions() {
    console.log('Current options:', this.filesList.options);
  }
}

Вот StackBlitz демо .

---

РЕДАКТИРОВАТЬ: Если вы хотите узнать только длина текущих опций, вы можете использовать только для чтения QueryList.length свойство:

export class MyComponent {
  @ViewChild('filesList', { static: true }) filesList: MatSelectionList;

  getOptions() {
    console.log('Current number of options:', this.filesList.options.length);
  }
}

И если вы хотите получить текущие параметры как можно скорее, вы можете проверить текущие параметры в AfterViewInit li крючок fecycle:

export class MyComponent implements AfterViewInit {
  @ViewChild('filesList', { static: true }) filesList: MatSelectionList;

  ngAfterViewInit() {
    console.log('Current number of options:', this.filesList.options.length);
  }
}

Answer 2

Вот официальная документация <mat-selection-list> https://run.stackblitz.com/api/angular/v1?file=src%2Fapp%2Flist-selection-example.ts

<mat-selection-list #shoes>
  <mat-list-option *ngFor="let shoe of typesOfShoes">
    {{shoe}}
  </mat-list-option>
</mat-selection-list>

<p>
  Options selected: {{shoes.selectedOptions.selected.length}}
</p>