typescript Angular 2 - 当默认值是硬编码时,在下拉列表中设置默认值

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/41622586/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 04:09:47  来源:igfitidea点击:

Angular 2 - setting default value in dropdown when default is hard coded

javascriptangulartypescriptngforangular2-ngmodel

提问by Jhorra

I have the following dropdown. I want to set All Patients as the default value.

我有以下下拉列表。我想将所有患者设置为默认值。

    <select [(ngModel)]="searchModel.careprovider">
      <option [value]="0">All Pateints</option>
      <option *ngFor="let user of practiceUsers" [value]="user._id.$oid">
        {{user.dn}}
      </option>
    </select>

My model is declared this way:

我的模型是这样声明的:

searchModel: any = { location: null, practice: null, name: '', careProvider: 0 };

I set the practiceUsers this way:

我以这种方式设置了practiceUsers:

  this._practice.getUsers(this.searchModel.practice).subscribe(result => {
    this.practiceUsers = result;
    this.searchModel.careProvider = 0;
  });

No matter how I change it I always just get a blank option as the default. I've tried adding an object to the this.practiceUsersarray after it is loaded, then setting the model value. I've tried setting the model value with and without quotes to see if a number or string made a difference. Everything I try still results in the default being the blank option.

无论我如何更改它,我总是得到一个空白选项作为默认值。我尝试this.practiceUsers在加载后向数组添加一个对象,然后设置模型值。我尝试设置带引号和不带引号的模型值,以查看数字或字符串是否有所不同。我尝试的一切仍然导致默认为空白选项。

In Angular 1 I would have used ng-options, but that is no longer available for Angular 2, and every example I find shows to use the ngForfor dropdowns.

在 Angular 1 中,我会使用ng-options,但在 Angular 2 中不再可用,我发现的每个示例都显示使用ngForfor 下拉列表。

采纳答案by Stefan Svrkota

Object attributes are case sensitive, in your object, attribute is called careProvider, but in your template, you are using searchModel.careproviderwith lowercase p. I think you also have to use NgValuedirective instead of valuebecause you are using NgModeldirective. So, this should work: it is not working

对象属性区分大小写,在您的对象中,属性被称为careProvider,但在您的模板中,您使用的searchModel.careprovider是小写p。我认为您还必须使用NgValue指令而不是value因为您正在使用NgModel指令。所以,这应该有效:它不起作用

<select [(ngModel)]="searchModel.careProvider">
  <option [ngValue]="0">All Pateints</option>
  <option *ngFor="let user of practiceUsers" [ngValue]="user._id.$oid">
    {{user.dn}}
  </option>
</select>

回答by Jaroslaw K.

Try to use [selected] attribute. I solved similar problem this way:

尝试使用 [selected] 属性。我这样解决了类似的问题:

<select>
   <option *ngFor="let option of options" value="{{option.id}}" [selected]="option === selectedOption">
      {{option.name}}
   </option>
</select>

I hope this helps a little

希望这会有帮助

回答by Michalis

<select class="form-control" id="policeid_country_id" name="policeid_country_id" formControlName="policeid_country_id">
    <option [ngValue]="null">Select</option>
    <option [ngValue]="country.id" *ngFor="let country of countries">{{country.country}}</option>
</select>