我正在尝试创建两个选择的投递箱,其中一个以角度过滤另一个。
第一次选择:
<select [(ngModel)]="selectedOption1">
<option *ngFor="let option of options1" [ngValue]="option.value">
{{option.description}}
</option>
</select>
第二次选择:
<select [(ngModel)]="selectedOption2">
<option *ngFor="let option of options2 | filterOption2ByOption1:selectedOption1"
[ngValue]="option.value">
{{option.Category2Name}}
</option>
</select>
选项1:
options1 = [{
description:"option 1-1",
value:1
},
{
description:"option 1-2",
value:2
}]
选项2:
options2 = [{
option1Value:1,
description:"option 2-1",
value:1
},
{
option1Value:2,
description:"option 2-2",
value:2
}]
管道看起来像这样:
@Pipe({
name: 'filterOption2ByOption1'
})
export class FilterOption2ByOption1 implements PipeTransform {
transform(options2: any, option1Value: number): any {
if(option1Value !== null && option1Value !== undefined){
return options2.filter(option => option.option1Value == option1Value)
}
return null;
}
}
似乎没有效果的是,在过滤器发挥其魔力之后ngModel
不会改变。
click
事件或[ngModelChange]
。
管道工作正常。唯一的问题是ngModel
不受其影响。