Angular 2 update data when another data has been updated

Question

I have two <select> elements, one for the Districts and the other one for the Cities. I get the districts by calling the function getDistricts() from ngOnInit() function. So far so good.

I don't know how to tell angular to fetch the new cities to the cities' select element. I tried to do like in the code below, but I've got an error:

ORIGINAL EXCEPTION: TypeError: Cannot read property 'cities' of undefined

It happens of course because the selectedDistrict is undefined in the start.

This is an example of a district object. (it includes the cities in it).

{
  "id": 5,
  "name": "A district",
  "cities": [
    {
      "id": 59,
      "name": "City 1"
    },
    {
      "id": 60,
      "name": "City 2"
    }
  ]
},

district.service.ts:

import {Injectable}         from "@angular/core";
import 'rxjs/add/operator/toPromise';

import {District}               from "./district";
import {HttpClientService}  from "../http-client/http-client.service";

@Injectable()
export class DistrictService {

    private districtsUrl = 'districts/all';

    constructor(private httpClient: HttpClientService) {
        this.httpClient = httpClient;
    }

    getDistricts(): Promise<District[]> {
        return this.httpClient.get(this.districtsUrl)
            .toPromise()
            .then(response => response.json().data)
            .catch(this.handleError);
    }

    getDistrict(district: string): Promise<District> {
        return this.getDistricts()[district];
    }

    private handleError(error: any) {
        console.error('An error occurred', error);
        return Promise.reject(error.message || error);
    }
}

view-search.component.ts:

export class ViewSearchComponent implements OnInit {
    districts: district[];
    selectedDistrict: district;

    constructor(private districtService: districtService) {}

    ngOnInit() {
        this.getDistricts();
    }

    getDistricts() {
        return this.districtService.getDistricts().then(districts => this.districts = districts);
    }

    selectDistrict(district: district) {
        this.selectedDistrict = district;
    }
}

view.search.component.html

<select class="search-select">
    <option *ngFor="let district of districts" (click)="selectDistrict(district)">
        {{ district.name }}
    </option>
</select>

<select class="search-select">
    <option *ngFor="let city of selectedDistrict.cities ">
        {{ city.name }}
    </option>
</select>

Günter Zöchbauer · Accepted Answer · 2016-09-11 15:27:26Z

1

Very few people know that Angular2 supports elvis operator (i.e. ?) in templates which is extremely useful for asynchronous data streams. For that, you have to update the template as,

<select class="search-select">
    <option *ngFor="let city of selectedDistrict?.cities ">
        {{ city.name }}
    </option>
</select>

edited Sep 11, 2016 at 15:27

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

answered Jun 19, 2016 at 14:32

codef0rmer

10.5k9 gold badges55 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Eliya Cohen Over a year ago

what does it do exactly?

codef0rmer Over a year ago

If I'm not wrong, you wanted to avoid Cannot read property 'cities' of undefined error especially when the data arrives asynchronously after some time. So the elvis operator does not read cities if selectedDistrict object is undefined/null and prevents the error from happening. Is not it solving your problem?

Eliya Cohen Over a year ago

I thought about another solution, I did *ngIf="selectedDistrict" which solved my problem. Your solution looks cleaner. I'll check it out

codef0rmer Over a year ago

Yeah. Note that ngIf will remove the DOM first and add it back later which is unnecessary. Not at all ideal if your DOM is huge and complex.

Eliya Cohen Over a year ago

Thank you! your solution is Epic and much more cooler than mine! :P

null canvas · Accepted Answer · 2016-06-19 09:43:39Z

1

Try to initialize your selectedDistrict: district;

selectedDistrict: district = {};

also for selecting an option I don't think this is a good idea (click)="selectDistrict(district)" because you could theoretically use the keyboard/arrows to select an item

so you should use the onchange event

<select (change)="alert(this.options[this.selectedIndex].text);">

edited Jun 19, 2016 at 9:43

answered Jun 19, 2016 at 8:30

null canvas

10.7k2 gold badges17 silver badges18 bronze badges

3 Comments

Eliya Cohen Over a year ago

Well now I don't get any error at the start, but I think that something is wrong when I do (click)="selectDistrict(district)" because I added to my html this code: {{ selectedArea | json }} and it was still empty even when I clicked on a district.

Eliya Cohen Over a year ago

I don't know why, but I don't get any alert. What am I missing?

Eliya Cohen Over a year ago

It is, but your answer is problematic because you can't make an empty object, It's not an instance of my District.

Tawfiq abu Halawah · Accepted Answer · 2016-06-19 09:09:41Z

0

try to initialize the districts: district[]; array you can do that like:

districts = [];

the problem is that you are trying to access city property of an uninitialized object. you need to make sure that you districts objects are initialized.

for example using new

this.selectedDistrict = new District();

or

district = {  "id": 5,
  "name": "A district",
  "cities": [
    {
      "id": 59,
      "name": "City 1"
    },
    {
      "id": 60,
      "name": "City 2"
    }
  ]}

also in this code

<select class="search-select">
    <option *ngFor="let district of districts" (click)="selectDistrict(district)">
        {{ district.name }}
    </option>
</select>

make sure that selectDistrict is called correctly

edited Jun 19, 2016 at 9:09

answered Jun 19, 2016 at 9:03

Tawfiq abu Halawah

1,2341 gold badge12 silver badges20 bronze badges

1 Comment

Eliya Cohen Over a year ago

This is a problematic approach. I found a solution. I just had to do *ngIf="selectedDistrict".

Eliya Cohen · Accepted Answer · 2016-06-19 13:19:06Z

0

Instead of initializing my selectedDistrict, I just had to add *ngIf="selectedDistrict" to my select element.

answered Jun 19, 2016 at 13:19

Eliya Cohen

11.6k14 gold badges79 silver badges127 bronze badges

Collectives™ on Stack Overflow

Angular 2 update data when another data has been updated

4 Answers 4

5 Comments

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related