Question

我确信这是一个简单的答案，但我似乎无法解决它。

我有一个下拉列表，其中包含John，Jack，Jill等名字。我在Builder，Joiner，Plasterer等专业人士中有第二个名单。

我想要做的是当我选择约翰时，我知道根据他的数据他是一个建造者，所以在我的第二个列表中我想要改变选择的值＆＃34;选择＆＃34;到＆＃34; Builder＆＃34;。

以下是我目前拥有的东西，任何关于如何做到这一点的建议都会很棒。

这是我第一次下拉的改变方法，但我没有得到预期的结果：

     firstDropDownChanged(val: any) {
    console.log(val);

    if (val.profession == "Builder") {
      this._values2.selected = "Builder";
    }
    else if (val.profession == "Plumber") {
      this._values2.selected = "Plumber";
    }
    else if (val.profession == "Plasterer") {
      this._values2.selected ="Plasterer";
    }
   else if (val.profession == "Joiner") {
      this._values2.selected ="Joiner";
    }

由于安迪

Answer 1

这是我能够根据Plunk中的代码开始工作的。

import {Component, NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>

      <select (change)="firstDropDownChanged($event.target.value)" >
        <option>Select</option>
        <option *ngFor='let v of _values1'>{{ v.name }}</option>
      </select>

      <select [(ngModel)]="selectedProfession" >
        <option>Select</option>
        <option *ngFor='let v of _values2'>{{ v }}</option>
      </select>
    </div>
  `,
})
export class App {
  name:string;
  selectedProfession:string;

  private _values1 = 
  [
    {name:"John", profession: "Builder"},
    {name:"Jack", profession: "Builder"},
    {name:"Jeff", profession: "Plumber"},
    {name:"Jill", profession: "Plasterer"},
    {name:"Joan", profession: "Joiner"},
  ];
  private _values2 = ["Builder","Plumber"," Joiner", "Plasterer"];

  constructor() {
    this.name = 'Angular2'
  }

  firstDropDownChanged(val: any) {
    console.log(val);
    this.selectedProfession = this._values1.find(item => item.name === val).profession;
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

我添加了FormsModule，因此我可以将select值绑定到组件中的属性（selectedProfession）。

然后我更改了firstDropDownChanged功能，根据_values1找到name数组中的选择工作人员，并将下拉菜单的值设置为该人员的专业。

Answer 2

如果您实际上不需要变量selectedProfession，那么在第一个下拉列表中我们将拥有完整的对象，以便我们可以在第二个下拉列表中使用它。这样我们就不需要任何方法。所以第一个看起来像这样：

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

我们使用[ngValue]绑定整个对象，然后第二个看起来像：

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

如果您希望捕获qualifications中的任何可能的更改，tradesman变量将进行更改，这种方式也很好。

此处的演示：http://plnkr.co/edit/TFXUtezSuJsJVuHNXfQ3?p=preview

Angular 2，根据另一个选择列表的选定值在选择列表上设置所选值

2 个答案: