过滤管道不会影响ngModel值

时间:2017-09-12 13:30:12

标签: html angular typescript

我正在尝试创建两个选择的投递箱,其中一个以角度过滤另一个。

第一次选择:

<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不受其影响。

0 个答案:

没有答案