Question

我正在一个项目中，该项目实现了自定义组件以实现Angular Material's mat-select。问题是，即使选择选项（mat-option）的数据/值已正确填充到业务逻辑（.ts文件）中，但span元素似乎为空，这又导致下拉菜单将变为空白。

<mat-option ... ng-reflect-value="correct value">
  <span class="mat-option-text"> </span>
</mat-option>

虽然此特定选项的值正确显示在ng-reflect-value元素的mat-option属性中，但是应该呈现该选项文本的span为空。 / p>

非常感谢您的帮助。 PS：我正在使用共享的多选组件。

编辑-以下是一些相关的片段-

这是已创建以实现Angular材质的mat-select的自定义（可重复使用）组件的模板。其他组件也正在使用它，并且可以在其中正常工作。请注意，这里的mat-option确实使用了value进行绑定。

multiselect.component.html

<mat-form-field appearance="outline">
  <mat-select [formControl]="optionMultiCtrl" [multiple]="enableCheckbox" (selectionChange)="changeDD(multiSelect)" disableOptionCentering #multiSelect>
    <ngx-mat-select-search 
                          [showToggleAllCheckbox]="enableCheckbox" 
                          (toggleAll)="toggleSelectAll($event)" 
                          [formControl]="optionMultiFilterCtrl"
                          noEntriesFoundLabel="No matches found"
                          placeholderLabel=''
                          ></ngx-mat-select-search>
    <mat-option *ngFor="let option of filteredMultiOptions | async" [value]="option">
      {{option.name}}
    </mat-option>
  </mat-select>
  <mat-error *ngIf="!optionMultiCtrl.valid && optionMultiCtrl.touched">
    {{ariaLabel}} can not be blank
  </mat-error>
</mat-form-field>

这是我当前正在使用的组件。 <app-multi-select>选择器是指上述组件I的模板。在属性绑定变量console.log()中确实正确填充了select选项（由[data]验证）。

summary.component.html

 <div class="col-md-4 col-sm-12">
                        <div class="row">
                            <div class="col-md-4"><b>Plan : </b></div>
                            <div class="col-md-6">
                                <app-multi-select [data]="Plan" [optionMultiCtrl]="PlanType" (changeDropdown)="onChangeFeatureType($event)"></app-multi-select>
                            </div>
                        </div>
                    </div>

这是此组件的相关TypeScript代码。

summary.component.ts

PlanType: FormControl = new FormControl('');

 onChangeFeatureType = (event: Event) => {
        console.log(event.target);// this comes out to be "undefined"
        this.loadData();
    }

Answer 1

在您的代码中，您没有为span元素提供任何值。

<mat-option ... ng-reflect-value="correct value">
  <span class="mat-option-text">{{ value }}</span>
</mat-option>

Angular（9）材质-跨度元素未从mat-option

1 个答案: