`Working Example`

Question

我有这个对象：

0: {year: "2015", period: ["P1"]}
1: {year: "2016", period: ["P1", "P2"]}
2: {year: "2017", period: ["P1", "P2", "P3"]}

我想做2 select-option：

当我在第一个select-option上按2015时，第二个select-option上的值将为   P1。

当我在第一个select-option上按2016时，第二个select-option上的值将为   P1，P2。

当我在第一个select-option上按2017时，第二个select-option上的值将为   P1，P2，P3。

基本上是什么事。我尝试过：

<select>
  <option disabled value="null">Select year</option>
  <option *ngFor="let item of fps" [value]="item.year">
     {{ item.year }}
  </option>
</select>
&nbsp;
<select>
  <option disabled value="null">Select period</option>
  <option *ngFor="let item of fps" [value]="item.period">
     {{ item.period }}
  </option>
</select>

但这会给我：（与2016年和2017年相同）

如何修改以获得我想要的东西？谢谢您的时间！

Answer 1

您需要绑定对第一个下拉列表值的选择来设置其他下拉列表选项，最好在每次更改下拉列表值时调用事件。使用您的代码，如下所示-

<select (change)='onSelect(val.value)' #val>
  <option disabled value="null">Select year</option>
  <option *ngFor="let item of options" [value]="item.year">
     {{ item.year }}
  </option>
</select>

<select>
  <option disabled value="null">Select period</option>
  <option *ngFor="let item of periodOptions" [value]="item">
     {{ item }}
  </option>
</select>

并这样绑定到您的方法中-

options = [
    {year: "2015", period: ["P1"]},
    {year: "2016", period: ["P1", "P2"]},
    {year: "2017", period: ["P1", "P2", "P3"]}
  ];
  periodOptions = [];

  onSelect(val) {
    console.log(val);
    if (val) {
      this.periodOptions = [];
      this.options.map(res => {
        if(res.year == val){
          this.periodOptions = res.period;
        }
      });
    }
  }

`Working Example`

Answer 2

在您的交易系统中，使用一个临时变量来保存年份选择

tempYearSelect : string = ''

HTML：

<select [(ngModel)]="tempYearSelect">
  <option disabled value="null">Select year</option>
  <option *ngFor="let item of fps" [value]="item.year">
     {{ item.year }}
  </option>
</select>
&nbsp;
<select>
  <option disabled value="null">Select period</option>
  <option *ngFor="let item of fps" [value]="item.period" [hidden]="item.year!=tempYearSelect">
     {{ item.period }}
  </option>
</select>

Answer 3

使用这种方式

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template:`
   <select [(ngModel)]="firstSelectValue">
    <option *ngFor="let opt of firstSelectOptions" [value]="opt">
       {{ opt }}
    </option>
   </select> 

   <select *ngIf="firstSelectValue" [(ngModel)]="secondSelectValue" >
    <option *ngFor="let opt of secondSelectOptions" [value]="opt">
      {{ opt }}
    </option>
  </select>


  <div>
    <div>First select value: {{ firstSelectValue }}</div>
    <div>Second select value:  {{ secondSelectValue }}</div>
  </div>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

    private opts = [ 
      {year: "2015", period: ["P1"]},
      {year: "2016", period: ["P1", "P2"]},
      {year: "2017", period: ["P1", "P2", "P3"]}
  ]

  firstSelectValue = '2015';
  secondSelectValue = null;

  get firstSelectOptions() {
    return this.opts.map(({year}) => year);
  }

  get secondSelectOptions() {
    return (this.opts.find(({year}) => year === this.firstSelectValue)).period
  }

}

链接：View Demo

Answer 4

尝试一下。

<select (change)="changeValue($event.target.value)">
<option disabled value="null">Select year</option>
<option *ngFor="let item of fps" [value]="item.year" (change)="changeValue(item.year)">
   {{ item.year }}
</option>
</select>
&nbsp;
<select>
<option disabled value="null">Select period</option>
<option *ngFor="let item of fps1" [value]="item">
   {{ item }}
</option>
</select>

TS代码

 changeValue(year){
this.fps.forEach(element => {
  if(element.year==year){
    this.fps1=element.period;
  }
});
}

Answer 5

当我们有几个关系选项时，“我的角度方式”就是使用ngValue。令人失望的是，在“年份”中，我们有一个对象，而不是数字，但优点是清晰的.ts

<select [(ngModel)]="year" #val>
  <option disabled value="null">Select year</option>
  <option *ngFor="let item of options" [ngValue]="item">
     {{ item.year }}
  </option>
</select>
&nbsp;
<select [(ngModel)]="periodo">
  <option disabled value="null">Select period</option>
  <option *ngFor="let item of year?.period" [value]="item">
     {{ item }}
  </option>
</select>
{{year?.year}}{{periodo}}

.ts只需要两个变量year）就可以成为对象，但是我们可以逐年获取year.year）和periodo

请参见stactblitz

export class AppComponent  {
  options = [
    {year: "2015", period: ["P1"]},
    {year: "2016", period: ["P1", "P2"]},
    {year: "2017", period: ["P1", "P2", "P3"]}
  ];
  year:any=null;
  period:any;
}

使用Angular中的对象的动态选择选项

5 个答案:

`Working Example`