如何根据角度2中的条件自动选择下拉列表答案

【问题标题】：How to automatically select a drop down based on the condition in angular 2如何根据角度2中的条件自动选择下拉列表
【发布时间】：2018-07-16 13:50:22
【问题描述】：

我有一个下拉菜单，默认情况下没有选择任何值。在我的主页中，我有一个条件来检查查询参数，并根据该条件自动选择下拉菜单。我尝试了几种方法，但没有奏效。下面是代码：

home.html:

<div class="col-md-3">
<select (change) = "onAccountTypeSelection()" required="required" class="form-control" [(ngModel)]="accountType">
  <option value="" selected>Select Account Type</option>
  <option *ngFor="let account of accountTypes" [value]="account.id">{{account.name}}</option>
</select>
</div>

home.js：

private accountTypes = Array<KeyValuePair>();
public ngOnInit() {
this.accountTypes = Array<KeyValuePair>();
this.accountTypes.push(new KeyValuePair('Saving', 'Saving'));
this.accountTypes.push(new KeyValuePair('Checking', 'Checking'));
this.accountType = '';
this.route.queryParams.subscribe((params: Params) => {
    console.log("iN HOME",params['account'],this.accountTypes[1]);
    if( params['account'] ){
        console.log("---Inside account type1",this.accountTypes);
        if(params['account'] == "saving"){
          this.accountTypes = this.accountTypes[0].id;//didnt work
        }
        else if(params['account'] == "checking"){
          this.accountTypes = this.accountTypes[1].id;//didnt work
        }
    }
 }

}

有人可以帮助我如何根据 params['account'] 在这里自动选择 drop ..谢谢

【问题讨论】：

标签： javascript angular angular5

【解决方案1】：

试试这个：-

<div class="col-md-3">
<select (change) = "onAccountTypeSelection()" required="required" class="form-control" [(ngModel)]="accountType">
<option value="" selected>Select Account Type</option>
<option *ngFor="let account of accountTypes" *ngIf="toBeSelected == account.name" [value]="account.id">{{account.name}}</option>
</select>
</div>

------------------------------------------- 

 private accountTypes = Array<KeyValuePair>();
 private toBeSelected= null;
 public ngOnInit() {
        this.accountTypes = Array<KeyValuePair>();
        this.accountTypes.push(new KeyValuePair('Saving', 'Saving'));
        this.accountTypes.push(new KeyValuePair('Checking', 'Checking'));
        this.accountType = '';
        this.route.queryParams.subscribe((params: Params) => {

        console.log("iN HOME",params['account'],this.accountTypes[1]);

        if( params['account'] ){
        console.log("---Inside account type1",this.accountTypes);
        if(params['account'] == "saving"){
            this.toBeSelected = "saving";
        }
        else if(params['account'] == "checking"){
            this.toBeSelected = "checking";
       }
     }
   }
 }

【讨论】：

会抛出Can't have multiple template bindings on one element. 错误

【解决方案2】：

我在angular Js中使用这个方法可能对你有帮助。只需指出您要选择的 ng-model 并使用此选择菜单，它肯定会起作用。在你的方法中我也遇到了麻烦，但这对先生试试这个有用。

<select class="form-control" ng-model="selectedProviderList" ng-options="data.provider_id as data.doctor_name for data in DataArray">

【讨论】：