Angular 2，根据另一个 select 列表的 selected 值设置 selected 值在 select 列表上

Question

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

我有一个下拉列表，其中包含 John、Jack、Jill 等人的名字。我有第二个列表，其中包含建筑工、细木工、石膏工等职业

我想做的是，当我 select John 时，我根据他的数据知道他是一名建筑工人，所以在我的第二个列表中，我想更改 selected 值"select" 到 "Builder"。

下面是我目前拥有的一个 plunker，任何关于如何制作它的建议都会很棒。

这是我第一个下拉菜单的更改方法，但我没有得到想要的结果：

     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)。

然后我在name的基础上修改了firstDropDownChanged函数，在_values1数组中找到选择的工人，并将下拉列表的值设置为那个人的职业。

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，根据另一个 select 列表的 selected 值设置 selected 值在 select 列表上

Angular 2, setting the selected value on a select list based on selected value of another select list

angular

select

2-way-object-databinding