[英]Angular2: Component doesn't update
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. 但是,当我切换项目变量 (通过使用页面上的导航)时,依赖项组件不会更新,它们没有获得正确的项目ID。
The projectdetail.html page that contains all the components: 包含所有组件的projectdetail.html页面:
<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: 编程语言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
Github containing All the code Github包含所有代码
Explanation when you run the github: go to http://localhost:3000/#/projectdetail/5
and click another project on the left bar. 运行github时的解释:转到http://localhost:3000/#/projectdetail/5
,然后单击左侧栏上的另一个项目。 Then you see the issue! 然后您看到问题了!
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: 您正确地向组件传递了一个ID数组,但是您从未听过所做的更改,因此可以快速解决该问题:
in programminglanguages.component.ts change this code: 在programminglanguages.component.ts中更改此代码:
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();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.