基于传入的参数从选择列表中选择Angular 2选择选项 [英] Angular 2 selecting option from select list based on passed in parameter

问题描述

您好，希望有人能提供我所缺少的建议。

Hi hope someone can advise what I am missing.

在我的插件演示中，我有一个编辑按钮，单击该按钮时，静态ID为2。 （这将模拟一个id参数传入我的真实项目中的该组件中）

In my plunker demo I have an edit button that on clicking gives a static id of 2 right now. (this simulates an id parameter coming into this component in my real project)

我要做的是获取传入的id并找到用户并在其中选择它们下拉列表，以便随后填充我的其他字段，就像当前从选择列表中选择一个用户一样。

What I am trying to do is take the passed in id and find the user and select them in the dropdownlist so it then populates my other fields, like it currently does if you just select a user from the select list.

在我的代码中，我可以看到我的ID并可以找到匹配的全名。我也可以填充id字段，但不将选择列表的选定值设置为全名，对此不胜感激。

In my code I can see I have the id and can find the full name that matches.I can also populate the id field, but not set the select list selected value to the full name any assistance appreciated.

当前的HTML显示带有两个数据绑定方式的dropdownlist和id字段

Html currently showing dropdownlist and id field with two way databinding

  <select [(ngModel)]="tradesman">
<option>Select</option>
<option [ngValue]="v" *ngFor='let v of _tradesmen'>{{ v.fullname}}</option>

显示我要做什么的柱塞演示

感谢
安迪

推荐答案

从问题我可以理解的是，您有一个ID，并且必须在选择框中针对该ID选择值。我希望它在页面加载上，这就是为什么我使用 ngOnInit（）。

From the question what i understood is, you have an id, and you have to choose the value in the select box with respect to this id. I hope it is on page load, thats why i am using ngOnInit().

ngOnInit() {  
    this.myId =2;    /* ur id */

    let index = this._tradesmen.findIndex(x => x.id == this.myId);

    if(index>=0){    /* if there is value in the array that matches the id value*/
      this.tradesman = this._tradesmen[index];
    } 
  }

您无需更改html中的任何内容

You don't have to change anything in your html file.

  <select [(ngModel)]="tradesman">
    <option>Select</option>
    <option [ngValue]="v" *ngFor='let v of _tradesmen'>{{ v.firstname }} {{ v.lastname }}</option>
  </select>

这篇关于基于传入的参数从选择列表中选择Angular 2选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！