Angular 2，设置默认值以选择选项

IT技术 javascript angular angular2-forms
2021-03-14 21:29:08

我尝试为选项添加默认值。它就像一种占位符，我使用这种方法来做到这一点。在纯 HTML 中它可以工作，但是如果我尝试使用*ngForangular 2 属性，它不会选择任何内容。

这是我在纯 HTML 中使用的代码：

  <select name="select-html" id="select-html">
    <option value="0" selected disabled>Select Language</option>
    <option value="1">HTML</option>
    <option value="2">PHP</option>
    <option value="3">Javascript</option>
  </select>

并使用 Angular 模板：

 <select name="select" id="select" [(ngModel)]="selectLanguage">
    <option *ngFor="let item of selectOption" 
      [selected]="item.value==0" 
      [disabled]="item.value==0">{{item.label}}</option>
  </select>

class是

import {Component} from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app-form-select',
  templateUrl: 'default.component.html'
})
export class DefaultComponent {
  private selectOption: any;
  constructor() {
    this.selectOption = [
      {
        id: 1,
        label: "Select Language",
        value: 0
      }, {
        id: 2,
        label: "HTML 5",
        value: 1
      }, {
        id: 3,
        label: "PHP",
        value: 2
      }, {
        id: 4,
        label: "Javascript",
        value: 3
      }
    ]
  }
}

我想Select Language被选为默认值。它已禁用但未选中。

如何选择它作为默认值？

活生生的例子

4个回答

更新

添加了4.0.0-beta.6compareWith

<select [compareWith]="compareFn"  [(ngModel)]="selectedCountries">
    <option *ngFor="let country of countries" [ngValue]="country">
        {{country.name}}
    </option>
</select>

compareFn(c1: Country, c2: Country): boolean {
   return c1 && c2 ? c1.id === c2.id : c1 === c2;
}

这样分配给的实例selectedCountries不需要是相同的对象，但可以传递自定义比较函数，例如能够匹配具有相同属性值的不同对象实例。

原来的

如果要将对象用作值，则需要[ngValue]在选项元素上使用。

  <select name="select" id="select" [(ngModel)]="selectLanguage">
    <option *ngFor="let item of selectOption" [ngValue]="item"
      [disabled]="item.value==0">{{item.label}}</option>
  </select>

当selectLanguage分配了一个选项值时[(ngModel)]="..."，默认情况下会选择这个值：

import {Component} from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app-form-select',
  templateUrl: 'default.component.html'
})
export class DefaultComponent {
  private selectOption: any;
  constructor() {
    this.selectOption = [
      {
        id: 1,
        label: "Select Language",
        value: 0
      }, {
        id: 2,
        label: "HTML 5",
        value: 1
      }, {
        id: 3,
        label: "PHP",
        value: 2
      }, {
        id: 4,
        label: "Javascript",
        value: 3
      }
    ];
    this.selectLanguage = this.selectOption[0];
  }
}
我想将 html 标签设置为标签值。
2021-04-18 21:29:08
@CTN 抱歉，我不明白你的问题。什么标签和什么 HTML DOM？
2021-04-19 21:29:08
如果您正在寻找 Angular 11 解决方案。答案在这里 stackoverflow.com/a/66229168/9207553
2021-04-24 21:29:08

我发现从selectOption数组中删除默认选项并单独指定默认的不可选择选项更好。

<select name="select" id="select" [(ngModel)]="selectLanguage">
  <option [ngValue]="undefined" disabled>Select Language</option>
  <option
         *ngFor="let item of selectOption"
         [value]="item.value"
  >
    item.label
  </option>
</select>
这是我一直在寻找的绝对答案。当您的选项动态来自服务时，当您想要选择默认选项（例如“Select blah blah”）时，这很有用。
2021-05-03 21:29:08
为什么这不是公认的答案。另一个答案非常复杂。
2021-05-12 21:29:08

请尝试以下示例代码：
替换yourValue为您要选择的任何值默认值 

<select  placeholder="country" >
       <option *ngFor="let country of countriesList" [ngValue]="country" [selected]="country.country_name == yourValue" >
             {{country.country_name}}
       </option>
</select>

<select class="form-control" [(ngModel)]="someList.key" name="key"  #key="ngModel" required>
     <option value="undefined" selected disabled>Select option</option>
     <option *ngFor="let data of someList" value="{{data.key}}">{{data.key}</option>
 </select>
其它你可能感兴趣的问题
上一篇addEventListener 与 onclick 下一篇在 Javascript 控制台中输入 {a:1} 给出 1 和 {a:1, b:2} 给出错误的行为是什么？