Ионный угловой *ngДля трубы
Я пытаюсь понять, почему мой фильтр канала *ngFor не срабатывает, он работает для «второго флажка», но не для «первого флажка», см. пример ниже.
Я добавил два флажка, которые хочу активировать фильтр канала в *NgFor. Как я могу установить «флажок один», чтобы активировать фильтр NgFor PIPE? Похоже, что при использовании объекта json в качестве параметра не обнаружено никаких изменений. Кроме того, я попробовал обнаружить изменения, но это не сработало.
Вид
<!-- checkbox one -->
<ion-checkbox labelPlacement = "end" [checked] = "checkbox_one.isChecked" (ionChange) = "setColorOne(checkbox_one.isChecked)">filter one</ion-checkbox>
<!-- checkbox two -->
<ion-checkbox labelPlacement = "end" [checked] = "checkbox_two" (ionChange) = "setColorTwo(checkbox_two)">filter two</ion-checkbox>
<div *ngFor = "let index of [0,1] | color : checkbox_one"></div>
<div *ngFor = "let index of [0,1] | color : checkbox_two"></div>
Контроллер
public checkbox_two = true;
public checkbox_one =
{
isChecked: true
}
public setColorOne(color:any) {
this.checkbox_one.isChecked = !color;
//this.changeDetection.detectChanges();
}
public setColorTwo(color:boolean) {
this.checkbox_two = !color;
}
Трубка
transform(items: any[], colors:any): any[] {
console.info("PIPE");
return items;
}
Ответы 1
Есть 2 варианта использования: primitive type и non primitive type.
- Примитивный тип
public checkbox_two = true;
public setColorTwo(color: boolean) {
this.checkbox_two = !color;
}
Ваш канал может вызвать любое изменение вашей переменной, поскольку значение было изменено. У примитивного типа, кажется, нет никаких проблем.
- Непримитивный тип (объект)
Помните механизм трубы:
Если это правда, канал является чистым, а это означает, что метод Transform() вызывается только тогда, когда изменяются его входные аргументы
В этом случае канал не вызывается, поскольку аргумент не изменился:
public setColorOne(color:any) {
this.checkbox_one.isChecked = !color;
//this.changeDetection.detectChanges();
}
Вы должны обновить свой объект таким образом, чтобы сообщить каналу, что ссылка была изменена:
public checkbox_one = {
isChecked: true,
};
public setColorOne(color: any) {
this.checkbox_one = {
isChecked: !color
}
}
Спасибо за информацию и решение, которое отлично работает. Прочитав об этой проблеме, я нашел аналогичное решение проблемы, и, к сведению, это было: this.checkbox_one= JSON.parse(JSON.stringify(this.checkbox_one));