Angular2: Component doesn't update

Question

I am building an angular application about some projects I did. I have a detail page that shows the detail of a project.

The problem: When I go to the project detail page, everything is correct. But when I switch the project variable (by using the navigation I have on the page) the dependency component doesn't update, they don't get the correct project ID.

The projectdetail.html page that contains all the components:

<div class="container-content" *ngIf="project">
    <div class="projectdetail">
        <div class="thumbnail header">
            <img [src]="project.img" [alt]="project.name" class="projectImage" />
            <div>
                <h2>{{project.name}}</h2>
                <!--The programming component that you can see in the image-->
                <programming-languages [ids]="project.languages"></programming-languages>
            </div>
        </div>
        <div>
            <carousel interval="5000" noWrap="false">
                <slide *ngFor="let slidez of slides; let index=index">
                    <img [src]="slidez.image" class="carouselimg" />
                    <div class="carousel-caption">
                        <h4>Slide {{slidez.id}}</h4>
                        <p>{{slidez.text}}</p>
                    </div>
                </slide>
             </carousel>
        </div>
        <div class="thumbnail detail">
            <p>{{project.description}}</p>
        </div>
    </div>
    <div class="projects hidden-mm hidden-sm hidden-xs">
        <projectsidelist [notShowId]="selectedProjectId"></projectsidelist>
    </div>
</div>

The language component code:

import { Component, Input, OnInit } from '@angular/core';

import { ProgrammingLanguagesService } from '../services/programminglanguages.service';
import { ProgrammingLanguage } from '../models/programmingLanguage';

@Component({
    selector: 'programming-languages',
    templateUrl: 'app/components/programminglanguages.component.html',
    providers: [ProgrammingLanguagesService]  
})
export class ProgrammingLanguages implements OnInit {
    @Input()
    ids: number[];
    programmingLanguages: ProgrammingLanguage[];
    constructor(private programmingLanguagesService: ProgrammingLanguagesService) {

    }

    getProgrammingLanguages() {
        this.programmingLanguagesService.getProgrammingLanguages().subscribe(programmingLanguages => {
            var result: ProgrammingLanguage[] = [];
            this.ids.forEach((key: number) => {
                programmingLanguages.forEach((programmingLanguage: ProgrammingLanguage) => {
                    if (programmingLanguage.id == key)
                    {
                        result.push(programmingLanguage);
                    }
                })
            })       
            this.programmingLanguages = result;
        });
    }

    ngOnInit() {
        setTimeout(() => this.getProgrammingLanguages(), 0);
    }
}

The programming language html:

<div class="languageoverlay">
    <span *ngFor="let programmingLanguage of programmingLanguages; let lastElement = last">
        <img [src]="programmingLanguage.img" [alt]="programmingLanguage.name" />
        <span [hidden]="lastElement" class="languageseperator">+</span>
    </span>
</div>

If you need extra code please ask or refer to the github

Github containing All the code

Explanation when you run the github: go to http://localhost:3000/#/projectdetail/5 and click another project on the left bar. Then you see the issue!

@FabioAntunes Yea it is just the image that doesn't update correctly — kevingoos
– kevingoos, Commented Sep 29, 2016 at 14:25

MatWaligora · Accepted Answer · 2016-09-30 10:51:49Z

4

+50

You were correctly passing an array of id's to the component but you never listen to the changes made so there is a quick fix for you:

in programminglanguages.component.ts change this code:

import { Component, Input, OnInit } from '@angular/core';

to

import { Component, Input, OnInit, OnChanges} from '@angular/core';

and

export class ProgrammingLanguages implements OnInit {

to

export class ProgrammingLanguages implements OnInit, OnChanges {

and finally add this lifecycle function to you class body:

 ngOnChanges(): void {
        this.getProgrammingLanguages();
    }

edited Sep 30, 2016 at 10:51

answered Sep 30, 2016 at 10:33

MatWaligora

1,1971 gold badge12 silver badges15 bronze badges

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

5 Comments

yurzui Over a year ago

Why do you import SimpleChanges if you don't use it?

MatWaligora Over a year ago

it's only type declaration to changes, probably not required for him so he could go away without the parameter. I left it as I was checking the values :)

kevingoos Over a year ago

@MatWaligora I will check it this evening, and hopefully it will work :)

MatWaligora Over a year ago

I downloaded your code from github and checked it, worked for me but as you know "weird, it's working on my pc" can happen any time. Let me know if it helped

kevingoos Over a year ago

@MatWaligora It actually works great :) Thx You earned the 50 point xD

Collectives™ on Stack Overflow

Angular2: Component doesn't update

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related