Angular ngrx: назначить свойство только для чтения - PullRequest
Новая
       24

Angular ngrx: назначить свойство только для чтения

0 голосов
/ 24 апреля 2020

Я создаю приложение Angular с Ngrx, и у меня возникла проблема. Вот оно:

В OnInit я запускаю диспетчеризацию и селектор для получения своих данных из хранилища и хочу редактировать эти данные.
Я получаю ошибку «Невозможно назначить свойство« только для чтения »title объекта '[object Object]' ', когда я пытаюсь сделать это: x.title = ${x.title} (${count})

Я понимаю, почему я не могу переназначить, состояние является неизменным. Да, но как я могу редактировать свои данные? Я начал делать это в результате, но это логика дисплея c, я думаю, что я должен сделать это в логике компонента c.

Моя функция OnInit: 

ngOnInit() {
    this.store.dispatch(new GetAllProducts());
    this.store.select(selectResourcesList).pipe(
        distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b))
    )
        .pipe(tap((res => {
            res.resources.map(x => {
                let count = 0;
                res.events.map(y => {
                    if (y.resourceId === x.id) {
                        count += y.extendedProps.quantity;
                        return count;
                    }
                    return count;
                });
                x.title = `${x.title} (${count})`;
            });
        })))
        .subscribe((res) => {
            this.resources = res.resources;
            this.events = res.events;
            this.cdr.detectChanges();
        });

}

edit: я пытался редактировать свои данные в подписке, как это, но получаю ту же ошибку: 

    ngOnInit() {
    this.store.dispatch(new GetAllProducts());
    this.store.select(selectResourcesList).pipe(
        distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)))
        .subscribe((res) => {
            const tempResources = [...res.resources];
            const tempEvents = [...res.events];
            tempResources.map(x => {
                let count = 0;
                tempEvents.map(y => {
                    if (y.resourceId === x.id) {
                        count += y.extendedProps.quantity;
                    }
                });
                x.title = `${x.title} (${count})`;
            });
            this.resources = tempResources;
            this.events = tempEvents;
            this.cdr.detectChanges();
        });
}

Заранее спасибо за вашу помощь; -)

1 Ответ

0 голосов
/ 24 апреля 2020

Я нашел решение для неизменности хранилища байпаса:

Мне пришлось создать копию результата селектора (с оператором распространения) и внести в него изменения.

Вот так: 

    ngOnInit() {
    this.store.dispatch(new GetAllProducts());
    this.store.select(selectResourcesList).pipe(
        distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)))
        .subscribe((res) => {
            let tempResources = [...res.resources];
            let tempEvents = [...res.events];
            tempResources = tempResources.map(x => {
                let count = 0;
                tempEvents = tempEvents.map(y => {
                    if (y.resourceId === x.id) {
                        count += y.extendedProps.quantity;
                    }
                    return y;
                });
                x = {
                    ...x,
                    title: `${x.title} (${count})`
                };
                return x;
            });
            this.resources = tempResources;
            this.events = tempEvents;
            this.cdr.detectChanges();
        });
}
...