What is the best way to ensure that my variable updates whenever its reference changes?

Question

What is the best way to ensure that my variable updates whenever its reference changes?

Having trouble updating an Angular2 component's variable that is tied to a variable in another service? You're not alone. I've been struggling to get it to update without constantly resetting the variable.

In my component, I have the following code inside ngOnInit:

ngOnInit(){
   this.rooms = this.globals.filteredRooms;
}

Meanwhile, in my @injectable called AppGlobals, I find myself frequently writing code like this:

applyFilters() {
    this.filteredRooms = this.rooms.filter(r => this.campFilters.includes(r.camp));
}

The issue arises when I want the rooms variable in my component to automatically change whenever the filteredRooms variable in appGlobals changes. Instead of this automatic update, I keep having to manually set this.rooms = this.globals.filteredRooms over and over again.

I've attempted various solutions such as trying (and failing) to create an Observable and subscribe to it, importing my component into appGlobals to trigger updates (resulting in mysterious errors), and exploring the idea of using byRef specification to establish a reference rather than making copies.

If changing to a reference is indeed necessary, how can that be achieved? How do I go about creating an Observable and subscribing to it if that's the solution? Or perhaps there's a different approach altogether that I'm missing?

typescript angular pass-by-reference observable

Answer 1

Answer №1

There is a limitation to what you are trying to achieve, and here's the explanation:

let x = [1, 2];
console.log(x); // [1, 2]

let y = x;
console.log(y); // [1, 2]

x = [1, 2, 3];

console.log(x); // [1, 2, 3]
console.log(y); // [1, 2]

By assigning x = y, both variables point to the same memory location (in this case, [1, 2]).
When you modify y, it only changes what y points to, while x still points to the original value.

To avoid this issue, you can use a container for the value, such as:

interface Ref {
    val: number[];
}

let x = { val: [1, 2] };
console.log(x.val); // [1, 2]

let y = x;
console.log(y.val); // [1, 2]

x.val = [1, 2, 3];

console.log(x.val); // [1, 2, 3]
console.log(y.val); // [1, 2, 3]

Since you haven't provided the part of your code where filteredRooms is declared, I cannot give you an exact solution, but you can infer from my example.

If you need to perform similar tasks multiple times, consider using a helper class like this:

class Ref<T> {
    private val: T;

    public set(value: T): void {
        this.val = value;
    }

    public get(): T {
        return this.val;
    }
}

Answer 2

There is a limitation to what you are trying to achieve, and here's the explanation:

let x = [1, 2];
console.log(x); // [1, 2]

let y = x;
console.log(y); // [1, 2]

x = [1, 2, 3];

console.log(x); // [1, 2, 3]
console.log(y); // [1, 2]

By assigning x = y, both variables point to the same memory location (in this case, [1, 2]).
When you modify y, it only changes what y points to, while x still points to the original value.

To avoid this issue, you can use a container for the value, such as:

interface Ref {
    val: number[];
}

let x = { val: [1, 2] };
console.log(x.val); // [1, 2]

let y = x;
console.log(y.val); // [1, 2]

x.val = [1, 2, 3];

console.log(x.val); // [1, 2, 3]
console.log(y.val); // [1, 2, 3]

Since you haven't provided the part of your code where filteredRooms is declared, I cannot give you an exact solution, but you can infer from my example.

If you need to perform similar tasks multiple times, consider using a helper class like this:

class Ref<T> {
    private val: T;

    public set(value: T): void {
        this.val = value;
    }

    public get(): T {
        return this.val;
    }
}

Answer 3

Answer №2

After struggling for days with no progress on this issue, I finally managed to create the Observable right after posting this question. It's quite ironic how things work out sometimes. Here is the solution in case it can help someone else:

In my AppGlobals class:

@Injectable()
export class AppGlobals {

    private _filteredRooms = new BehaviorSubject(this.rooms);

    public filteredRooms = this._filteredRooms.asObservable();

    public rooms = [];


    constructor(private roomSvc: RoomSvc) {
        this.getRooms();
    }

    applyFilters() {
        this._filteredRooms.next(this.rooms.filter(r => this.campFilters.includes(r.camp)));
    }

    getRooms() {
        this.roomSvc.getRooms()
            .subscribe(r => {
                    this.rooms = r;
                    this._filteredRooms.next(this.rooms);
                }
            );
    }
}

Also, remember to import BehaviorSubject from 'rxjs/BehaviorSubject'

Inside my component:

export class TableComp {
   roomSubs: Subscription;
   rooms: Array<any>;
constructor(private globals: AppGlobals) { }

    ngOnInit() {

        this.roomSubs = this.globals.filteredRooms
            .subscribe(r =>
                this.rooms = r
            );
    }
}

Note that you need to import Subscription from 'rxjs/Subscription'

Answer 4

After struggling for days with no progress on this issue, I finally managed to create the Observable right after posting this question. It's quite ironic how things work out sometimes. Here is the solution in case it can help someone else:

In my AppGlobals class:

@Injectable()
export class AppGlobals {

    private _filteredRooms = new BehaviorSubject(this.rooms);

    public filteredRooms = this._filteredRooms.asObservable();

    public rooms = [];


    constructor(private roomSvc: RoomSvc) {
        this.getRooms();
    }

    applyFilters() {
        this._filteredRooms.next(this.rooms.filter(r => this.campFilters.includes(r.camp)));
    }

    getRooms() {
        this.roomSvc.getRooms()
            .subscribe(r => {
                    this.rooms = r;
                    this._filteredRooms.next(this.rooms);
                }
            );
    }
}

Also, remember to import BehaviorSubject from 'rxjs/BehaviorSubject'

Inside my component:

export class TableComp {
   roomSubs: Subscription;
   rooms: Array<any>;
constructor(private globals: AppGlobals) { }

    ngOnInit() {

        this.roomSubs = this.globals.filteredRooms
            .subscribe(r =>
                this.rooms = r
            );
    }
}

Note that you need to import Subscription from 'rxjs/Subscription'

What is the best way to ensure that my variable updates whenever its reference changes?

Answer №1

Answer №2

Similar questions

Tips for efficiently utilizing Hooks with React Context:

When a model is changed from within a jQuery event, Angular 2 fails to update the view

Efficiently utilizing ngrx by orchestrating various services and actions to achieve accurate mapping

Split panel vertically with a draggable divider allowing you to customize the height of each section

Embark on a journey through a preorder traversal of a Binary Tree using TypeScript

"Having trouble subscribing? The first attempt doesn't seem to be working

What is your approach to organizing the HTTP requests in your Angular 2+ application?

What kind of Input field is being provided as an argument to a TypeScript function?

Encountering a schematic flow error while utilizing the angular cli for project creation

Combining Arrays Together in TypeScript

How can the center element be aligned without recursively centering all children?

What is the process for activating shift key - multi-selection in the PrimeNG pick list?

The default value in an Ionic select dropdown remains hidden until it is clicked for the first time

Creating a Component with a flexible template: (Using transclusion and an inline template)

Dynamic parameterization of Angular form controls

Guide on creating a Typescript function with a strongly typed argument

Investigating sibling HTML elements using an Angular directive

Closing a modal using the Enter key in Angular 6

The PhpStorm code completion feature is not functioning properly when working with TypeScript code that is distributed through NPM

The promise callback in Angular2 is unable to access this