2016-06-01 3 views
2

Я пытаюсь создать простой ngFor для отображения списка элементов и фильтрации его с помощью трубы.AngularJS2 Losing binding after pipe filter

Проблема в том, что если я использую трубку и удаляю элемент, он отключает его из массива, но дисплей не обновляется.

Plunker

Мой код трубы:

class MyFilterPipe { 
    transform(list,remove){ 
     return list.filter((item)=>item.name != remove); 
    } 
} 

Код шаблона:

<ul> 
    <li *ngFor="#item of list |myFilter:'F' ">{{item.name}} <button (click)="deleteMe(item)">Delete</button></li> 
</ul> 

Благодаря Avi

ответ

4

Есть две категории pipes: чистый и нечистый.

Угловой выполняет чистую трубу только при обнаружении чистого изменения на входное значение. Чистым изменением является либо изменение примитивного входного значения (String, Number, Boolean, Symbol), либо измененная ссылка на объект (Date, Array, Function, Object).

Угловой выполняет нечистую трубку во время каждого цикла обнаружения изменений компонентов. Нечистая труба будет называться много, так же часто, как каждое нажатие клавиши или движение мыши.

Slice метод не изменяет ссылки на list массива, так как ваша труба чисто, угловая не выполнить трубу и отображение не обновляется.

Использование нечистой трубы

@Pipe({ 
    name: 'myFilter', 
    pure: false 
}) 

или изменить ссылку list свойства при удалении элемента из него.

+1

Большое спасибо за подробное объяснение и решение –

Смежные вопросы