Блог

Главная - Вопросы по программированию - Angular 2 и rxjs: как иметь свойство динамического массива в дочернем компоненте, которое является отфильтрованным подмножеством родительского свойства?

Angular 2 и rxjs: как иметь свойство динамического массива в дочернем компоненте, которое является отфильтрованным подмножеством родительского свойства?

#javascript #angular #typescript #observable

#javascript #angular #typescript #наблюдаемый

Вопрос:

Я экспериментирую с Angular 2 и его новыми реактивными концепциями.

Допустим, прямо сейчас у меня есть книжный магазин, который содержит список всех книг в магазине (извлеченный из внешнего API / источника). В этом хранилище вы найдете пару полок, которые, соответственно, содержат подмножество доступных книг.

Итак, используя классы, вы получите что-то вроде этого:

 export class BookStore {
    public books: Book[]
}

export class Shelf {
    public shelfId: string
    public store: BookStore
    public shelfBooks: /* ????, Observable? */

    /* here I'd like to have something declarative that allows me to filter the books that have their shelfId == a shelf's ID. */

   constructor() {
       this.shelfBooks = /* ... (self.store.books) */
           .filter( book => book.shelfId == this.shelfId )
           /* Have this dynamically updating the property if the parent's book list changes - how? */
   } 
}

В шаблоне я хотел бы использовать директиву ngFor для отражения списка книг в каждом представлении полки.

Каков «официальный» подход к этому?

Я читал о наблюдаемых, но они, похоже, в основном используются для Http и других вещей. В Angular 2 уже есть очень хорошая система обнаружения изменений, но я не уверен, какой подход здесь использовать.

Комментарии:

1. Да, учитывая, что self.store.books это наблюдаемое, которое получает новые значения, this.shelfBooks наблюдаемое будет динамически обновляться. У вас есть проблемы с этим подходом? Можете ли вы реплицировать его как plunk, если вы это сделаете?

2. Я думаю, что у меня здесь есть какой-то блокиратор мозга. Я бы хотел, чтобы shelfBooks автоматически обновлялся всякий раз, когда книги в книжном магазине меняются или обновляются. К сожалению, я понятия не имею, что искать в Google или где найти рабочие примеры. Документация по этому вопросу тоже довольно скудная.

3. Я думаю, вы можете начать с заполнения пробелов в опубликованном вами коде. Что такое self.store.books ? Является ли оно наблюдаемым? Где оно назначается? Как Shelf используется?

Метки: ,