我有这个对象:
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>
<select>
<option disabled value="null">Select period</option>
<option *ngFor="let item of fps" [value]="item.period">
{{ item.period }}
</option>
</select>
但这会给我:(与2016年和2017年相同)
如何修改以获得我想要的东西?谢谢您的时间!
答案 0 :(得分:2)
您需要绑定对第一个下拉列表值的选择来设置其他下拉列表选项,最好在每次更改下拉列表值时调用事件。使用您的代码,如下所示-
<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;
}
});
}
}
答案 1 :(得分:1)
在您的交易系统中,使用一个临时变量来保存年份选择
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>
<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>
答案 2 :(得分:1)
使用这种方式
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
答案 3 :(得分:0)
尝试一下。
<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>
<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;
}
});
}
答案 4 :(得分:0)
当我们有几个关系选项时,“我的角度方式”就是使用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>
<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;
}