Angular 2 | cannot assign to array because it is a constant or a read-only property

Question

I'm trying to make a get request to my backend api that returns a array of objects. I'm using following code:

small.component.ts (when calling openDepositModal() it calls the function getUserInventory() from auth.service.ts which makes a get request to my backend api that then returns an array with objects.)

[...]

export class Item{
    id: String;
    name: String;
    img: String;
    value: String;
}

const items: Item[] = [];

[...]

openDepositModal(){
    if(!items){
        this.authService.getUserInventory().subscribe(data => {
            items = data; <-- ERROR HERE
        });
    }
}

auth.service.ts

[...]

getUserInventory(){
    let headers = new Headers();
    this.loadToken();
    headers.append('Authorization', 'JWT ' + this.authToken);
    headers.append('Content-Type', 'application/json');
    return this.http.get('http://localhost:3000/api/user/inventory', { headers: headers })
    .map(res => res.json());
}

[...]

Inside of small.component.ts I am trying to insert the data I got from the service into the "items" array. But I get the error "cannot assign to array because it is a constant or a read-only property". Can someone fix my code? Thanks. :-)

Answer 1

use let instead of const

eg let items: Item[] = [];

const declarations are like let declarations but, as their name implies, their value cannot be changed once they are bound. In other words, they have the same scoping rules as let, but you can't re-assign to them.

let vs. const (docs)

Given that we have two types of declarations with similar scoping semantics, it's natural to find ourselves asking which one to use. Like most broad questions, the answer is: it depends.

Applying the principle of least privilege, all declarations other than those you plan to modify should use const. The rationale is that if a variable didn't need to get written to, others working on the same codebase shouldn't automatically be able to write to the object, and will need to consider whether they really need to reassign to the variable. Using const also makes code more predictable when reasoning about flow of data.

On the other hand, let is not any longer to write out than var, and many users will prefer its brevity. The majority of this handbook uses let declarations in that interest.

Answer 2

用this.items = data;替换错误this.items = data;

Answer 3

because you have declared it as an constant. declare it as a property in your class and then you can assign values to it

export class SmallComponent{
private items: Item[] = [];

[...]

openDepositModal(){
    if(!items){
        this.authService.getUserInventory().subscribe(data => {
            this.items = data; <-- HERE
        });
    }
}

If they are outside of component class then change const to let