如何在Angular 2的select控件中显示占位符(空选项)?

Leantraxxx

我的模板中有以下代码:

<select [ngModel]="selectedSubSectionId" (ngModelChange)="onSubSectionChange($event)">
  <option *ngFor="let subSection of event.subSections" [ngValue]="subSection.id">{{ subSection.name }}</option>
</select>

在我的组件中:

public selectedSubSectionId: any;

public onSubSectionChange(subSectionId: any) {
  // some code I execute after ngModel changes.
}

可以,但是一开始我有一个空盒子。我想在那里显示一个占位符消息。如何使用ngModel做到这一点?

测验

我的解决方案:

在组件打字稿文件中,我添加了一个我未初始化的属性selectUndefinedOptionValue,在html中,我添加了undefinedSelectOptionValue作为占位符选项的值。此解决方案适用于数字和字符串模型属性。

@Component({
  selector: 'some-component-selector',
  templateUrl:'url to template',
})
export class SomeComponent implements OnInit {
    private selectUndefinedOptionValue:any;
    private someObject:SomeObject;
    
    ngOnInit() {
      someObject = new SomeObject();
    }
}
<select [(ngModel)]="someObject.somePropertyId">
  <option disabled hidden [value]="selectUndefinedOptionValue">-- select --</option>
  <option *ngFor="let option of options" [value]="option.id">option.text</option>
</select>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在角度 4 的 <select2> 标签中显示占位符?

来自分类Dev

如何在select2中更改占位符?

来自分类Dev

如何在Select2中首先设置占位符

来自分类Dev

如何在TEdit中显示占位符

来自分类Dev

如何在 safari 中显示占位符

来自分类Dev

如何在 angular 8 中更改 mat-select 中的占位符颜色

来自分类Dev

如何在 angular 7 中自定义占位符

来自分类Dev

Magento2结帐表格:如何在字段中显示占位符属性值?

来自分类Dev

如何在kendo-ui中默认显示占位符

来自分类Dev

如何在 ios UITextfield 中显示完整的占位符文本?

来自分类Dev

如何在select_time中包含占位符文本?

来自分类Dev

如何在Angular 2中显示文字{{

来自分类Dev

如何在Dart三元运算符中检查空控件值以显示默认图像(如果为空)?

来自分类Dev

如何在Angular JS中显示依赖选择框选项

来自分类Dev

如何在ControlGroup Angular 2中更新控件

来自分类Dev

如何在Angular的select中设置默认选项?

来自分类Dev

Angular:如何在 Angular 的选择控件中为选项设置 aria-selected

来自分类Dev

如何在angular2或打字稿中获取ng-select中的选项

来自分类Dev

我如何在React中更新日期占位符选项onMouseOver

来自分类Dev

如何在Angular JS中显示倒数

来自分类Dev

如何在Angular的Dropdown中显示Timepicker?

来自分类Dev

如何在Angular中显示加载状态

来自分类Dev

如何在Angular JS中显示视图?

来自分类Dev

如何在 Angular 中显示列表

来自分类Dev

如何在JavaFX中设置占位符?

来自分类Dev

如何在占位符中添加图标

来自分类Dev

如何在AngularJS中的select中添加空选项?

来自分类Dev

如何在JSON对象中包含空值作为占位符?

来自分类Dev

如何在angularjs select中避免空自动选项?

Related 相关文章

  1. 1

    如何在角度 4 的 <select2> 标签中显示占位符?

  2. 2

    如何在select2中更改占位符?

  3. 3

    如何在Select2中首先设置占位符

  4. 4

    如何在TEdit中显示占位符

  5. 5

    如何在 safari 中显示占位符

  6. 6

    如何在 angular 8 中更改 mat-select 中的占位符颜色

  7. 7

    如何在 angular 7 中自定义占位符

  8. 8

    Magento2结帐表格:如何在字段中显示占位符属性值?

  9. 9

    如何在kendo-ui中默认显示占位符

  10. 10

    如何在 ios UITextfield 中显示完整的占位符文本?

  11. 11

    如何在select_time中包含占位符文本?

  12. 12

    如何在Angular 2中显示文字{{

  13. 13

    如何在Dart三元运算符中检查空控件值以显示默认图像(如果为空)?

  14. 14

    如何在Angular JS中显示依赖选择框选项

  15. 15

    如何在ControlGroup Angular 2中更新控件

  16. 16

    如何在Angular的select中设置默认选项?

  17. 17

    Angular:如何在 Angular 的选择控件中为选项设置 aria-selected

  18. 18

    如何在angular2或打字稿中获取ng-select中的选项

  19. 19

    我如何在React中更新日期占位符选项onMouseOver

  20. 20

    如何在Angular JS中显示倒数

  21. 21

    如何在Angular的Dropdown中显示Timepicker?

  22. 22

    如何在Angular中显示加载状态

  23. 23

    如何在Angular JS中显示视图?

  24. 24

    如何在 Angular 中显示列表

  25. 25

    如何在JavaFX中设置占位符?

  26. 26

    如何在占位符中添加图标

  27. 27

    如何在AngularJS中的select中添加空选项?

  28. 28

    如何在JSON对象中包含空值作为占位符?

  29. 29

    如何在angularjs select中避免空自动选项?

热门标签

归档