我正在一个项目中,该项目实现了自定义组件以实现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:我正在使用共享的多选组件。
编辑-以下是一些相关的片段-
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>
summary.component.ts
PlanType: FormControl = new FormControl('');
onChangeFeatureType = (event: Event) => {
console.log(event.target);// this comes out to be "undefined"
this.loadData();
}
答案 0 :(得分:0)
在您的代码中,您没有为span
元素提供任何值。
<mat-option ... ng-reflect-value="correct value">
<span class="mat-option-text">{{ value }}</span>
</mat-option>