使用Angular中的對象的動態選擇選項

Question

我有這個對象：

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

我想做2 select-option ：

當我在2015年按在第一select-option ，在第二值select-option是P1 。

當我在2016壓在第一select-option ，在第二值select-option為P1 ， P2 。

當我在2017壓在第一select-option ，在第二值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;
        }
      });
    }
  }

工作實例

Answer 2

在TS中，使用一個臨時變量保存年份選擇

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
  }

}

鏈接： 查看演示

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;
}