Question

我试图在Angular 4上的选择中添加一个占位符，但无法使其正常工作，

这是我的代码：

<select name="edit" [(ngModel)]="edit">
        <option [ngValue]="null" disabled [selected]="true"> Please select one option </option>
        <option *ngFor="let select of list" [ngValue]="edit"> {{ select }}</option>
</select>


export class AppComponent  {
  list: any[] = ['1', '2', '3'];
  edit: any;
}

Answer 1

我创建了plunker。希望这会有所帮助。

 <select name="edit" [(ngModel)]="edit">
    <option [ngValue]="undefined" disabled  selected> Please select one option </option>
    <option *ngFor="let select of list" [ngValue]="edit"> {{ select }}</option>
  </select>
export class AppComponent  {
  list: any[] = ['1', '2', '3'];
  edit: any;
}

Answer 2

如果您希望默认选中占位符：

<select name="edit" [(ngModel)]="edit">
    <option value="0" disabled selected>Select your option</option>
    <option *ngFor="let select of list" [value]="select"> {{ select }}</option>
</select>

DEMO

Answer 3

我知道它是一个老问题，已经选择了一个答案，但是我觉得我可以添加一个小改进。在占位符上包含“隐藏”，这样就可以消除它在下拉菜单中的可见性。

<select name="edit" [(ngModel)]="edit">
   <option value="0" disabled selected hidden>Select your option</option>
   <option *ngFor="let select of list" [value]="select"> {{ select }}</option>
</select>

Answer 4

你可以试试吗，在模板中

<select name="edit" [(ngModel)]="edit">
    <option value=""> Please select one option </option>
    <option *ngFor="let select of list" value="{{select}}"> {{ select }}</option>
</select>

component.ts

edit: string = '';

Answer 5

请尝试使用CSS将文本重叠放在框中，而不是攻击您的选择<options>，并使用*ngIf在有值时隐藏该占位符范围。

<div class="form-group rel">
    <span class="form-control placeholder" *ngIf="!fruitSelect.value">Fruit...</span>
    <select class="form-control" formControlName="fruitSelect" id="fruitSelect" #fruitSelect>
        <option *ngFor="let fruit of fruits" [value]="fruit.value">{{fruit.key}}</option>
    </select>
    <span class="err" *ngIf="hasErr('fruitSelect', 'required')">Fruit is required</span>
</div>

CSS：

.rel {
    position: relative;
}

.placeholder {
    position: absolute;
    pointer-events: none;
    opacity: 0.5;
    max-width: 90%; // don't cover the dropdown's arrow
    border-right: none;
}

rel课只会使position:absolute有效。 pointer-events确保占位符跨度不会占用鼠标点击次数。 max-width确保不透明度不会影响基础下拉控件的向下箭头，border-right只是撤消引导类form-control所做的事情。

如果您没有使用bootstrap，那么将form-control替换为您正在使用的任何内容，但尝试将该类放在控件和占位符span上，以便它们的大小和颜色匹配。

Angular使用#fruitSelect模板变量来检查下拉列表中的值，其中占位符跨度检查*ngIf以了解何时消失。

Answer 6

我们可以添加一个虚拟选项作为占位符，在选项下拉菜单中可以隐藏。我们可以添加自定义下拉菜单图标作为背景，以替换浏览器下拉菜单图标。

仅当未选择值

时，技巧才能启用占位符 CSS

下面的代码进行自我解释。

/ **我的组件模板* /

 <div class="dropdown">
      <select [ngClass]="{'placeholder': !myForm.value.myField}"
 class="form-control" formControlName="myField">
        <option value="" hidden >Select a Gender</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </select>
    </div>

/ **我的组件。TS* /

constructor(fb: FormBuilder) {
  this.myForm = this.fb.build({
    myField: ''
  });
}

/ ** global.scss * /

.dropdown {
  width: 100%;
  height: 30px;
  overflow: hidden;
  background: no-repeat white;
  background-image:url('angle-arrow-down.svg');
  background-position: center right;
  select {
    background: transparent;
    padding: 3px;
    font-size: 1.2em;
    height: 30px;
    width: 100%;
    overflow: hidden;

    /*For moz*/
    -moz-appearance: none;
    /* IE10 */
    &::-ms-expand {
      display: none;
    }
    /*For chrome*/
    -webkit-appearance:none;
    &.placeholder {
      opacity: 0.7;
      color: theme-color('mutedColor');
    }
    option {
      color: black;
    }
  }
}

Angular4占位符用于选择

6 个答案: