mat-selection-list не отображается в mat-autocomplete

Question

При создании компонента mat-autocomplete, который бы позволял множественный выбор, я хотел использовать список mat-selection-list. Это обеспечит некоторую желаемую встроенную функциональность, например, флажки.

Динамический список выбора матов не отображается внутри автозаполнения матов, даже когда массив 'chartList' запускается со значениями.

<mat-form-field>
    <mat-label>{{ Patient }}</mat-label>
    <input type="text" placeholder="Text" matInput formControlName="links" [matAutocomplete]="auto" />
    <mat-autocomplete #auto="matAutocomplete">
        <mat-selection-list #selectionList (selectionChange)="onSelectionChange($event)"  [disableRipple]="true">

            <mat-list-option *ngFor="let chart of chartList" [value]="chart"
                [checkboxPosition]="'before'" [id]="chart.key">
                <div class="d-flex">
                    <span class="col-4 xs-text">{{ chart.name }}</span>
                    <span class="col-3 xs-text">{{chart.additionalData.dateOfBirth | date}}</span>
                    <span class="col-4 xs-text">{{chart.additionalData.city }}</span>
                </div>
            </mat-list-option>
        </mat-selection-list>
    </mat-autocomplete>
  </mat-form-field>

Панель cdk показана в виде тонкого выпадающего меню без содержимого.

Answer 1

После тщательного изучения Документов я подумал, что, возможно, это как-то связано с этим.

Каждая опция должна быть определена тегом mat-option

Однако, как я уже упоминал в этом вопросе, должен был использоваться список выбора матов. Кроме того, в нем четко указано, что должно , а не должно быть .

Однако сработало это решение:

<mat-form-field>
    <mat-label>{{ Patient }}</mat-label>
    <input type="text" placeholder="Text" matInput formControlName="links" [matAutocomplete]="auto" />
    <mat-autocomplete #auto="matAutocomplete">
        <mat-selection-list #selectionList (selectionChange)="onSelectionChange($event)"  [disableRipple]="true">

            <mat-list-option *ngFor="let chart of chartList" [value]="chart"
                [checkboxPosition]="'before'" [id]="chart.key">
                <div class="d-flex">
                    <span class="col-4 xs-text">{{ chart.name }}</span>
                    <span class="col-3 xs-text">{{chart.additionalData.dateOfBirth | date}}</span>
                    <span class="col-4 xs-text">{{chart.additionalData.city }}</span>
                </div>
            </mat-list-option>
        </mat-selection-list>

     <mat-option [style.display]="'none'"></mat-option>
    </mat-autocomplete>
  </mat-form-field>

Обратите внимание на издание пустого коврика-опции.

Не уверен, зачем это нужно ...