Как отфильтровать наблюдаемый в родительском компоненте от дочернего компонента? - PullRequest
Новая
       21

Как отфильтровать наблюдаемый в родительском компоненте от дочернего компонента?

0 голосов
/ 28 мая 2018

У меня есть два компонента.

  1. Элемент списка - для отображения списка элементов (родительского элемента)
  2. Элемент - обертка для одного элемента (дочернего элемента)

В Item List component я в основном создаю наблюдаемое, используя сервис.Функция getItems () возвращает наблюдаемые элементы: 

items$: Observable<Item[]>;

ngOnInit() {
  this.items$ = this.service.getItems();
}

В шаблоне я делаю ngFor с асинхронным каналом для отображения списка элементов: 

<div *ngFor="let item of items$ | async">
    <card-item [item]="item"></card-item>
</div>

Теперь в Item component У меня есть возможность удалить этот конкретный элемент из базы данных firestore: 

@Input() item: Item;

removeItem() {
    this.service.removeItem(this.item.id);
}

Эта операция занимает некоторое время, поэтому я хотел удалить его «локально» из наблюдаемого в родительском компоненте.

Мне, вероятно, придется отфильтровать наблюдаемое в родительском компоненте и каким-то образом вернуть новое отфильтрованное наблюдаемое, но я не знаю, как мне управлять этим из дочернего компонента? 

removeItem() {
    // remove from firestore, but this can take some time

    this.service.removeItem(this.item.id);

    // meanwhile... remove it from the observable on parent

    source.pipe(filter(item => item.id !== this.item.id)); // here is the problem I have
}

Как вы можетесм. выше, я не знаю, как «подключиться» к наблюдаемому и отфильтровать его.

Причина в том, что когда я хочу анимировать операцию удаления (например, исчезновение), элемент мигает.Это потому, что анимация заканчивается раньше, чем запись удаляется из пожарного магазина.

1 Ответ

0 голосов
/ 28 мая 2018

Я предлагаю вам оставить свою карточку в качестве компонента презентации / тупой.Означает, что вы должны удалить служебную зависимость из нее, поскольку ее основная задача - отображать элемент.

Тогда скромным решением будет добавление вывода в элемент карты, который генерирует события удаления, сообщающие его родительскому компоненту "эй! ты должен удалить меня ".

Итак, в основном в card-item.component.ts ваш код будет выглядеть следующим образом: 

@Input() item: Item;
@Output() removeClick = new EventEmitter<Item>();

removeItem() {
    this.removeClick.emit(this.item);
}

Теперь мыприйти к «убрать» из наблюдаемой части.Я бы предпочел использовать термин filter , поскольку наблюдаемые - это потоки, и вы просто наблюдаете значения в определенный момент времени.Вместо этого вы можете удалить элементы из массива элементов.В этом случае вам необходимо сохранить локальную копию ваших текущих элементов, которые вы отображаете.Средства удаляют асинхронный канал и подписываются на ваши наблюдаемые в коде вашего компонента.

И в вашем item-list.component.ts 

ngOnInit() {
    this.items$ = this.service.getItems();
    this.items$.subscribe(items => {
        this.localItems = items;
    }
    )
}

onRemoveClick($event: Item) {
    // Removal logic here
    // Something like
    const index = this.localItems.indexOf($event);
    if (index > -1) {
        this.localItems.splice(index, 1);
    }
}

В вашем item-list.component.html : 

<div *ngFor="let item of localItems">
    <card-item [item]="item" (removeClick)="onRemoveClick($event)"> </card-item>
</div>
...