Question

在创建允许自动选择的垫子自动完成组件时，我想使用垫子选择列表。这将提供一些所需的本机功能，例如复选框。

即使以值启动数组“ chartList”，动态mat-selectiion-list也不显示在mat-autocomplete内部。

<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

仔细检查了Docs之后，我认为这可能与它有关。

每个选项都应由mat-option标记定义

但是，正如我在问题中提到的，要使用mat-selecetion-list。另外，它明确指出应该，而不是必须。

但这是可行的解决方案：

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

请注意一个空的mat-option版本。

不确定为什么有必要...

垫选择列表未显示在垫自动完成中

1 个答案: