Angular2：组件不更新

我正在构建关于我所做的一些项目的角度应用程序。我有一个显示项目细节的详细信息页面。Angular2：组件不更新

问题： 当我进入项目详细信息页面时，一切正常。但是，当我切换项目变量（通过使用我在页面上的导航）依赖项组件不会更新，他们没有得到正确的项目ID。

包含所有组件的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>

语言组件代码：

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); 
    } 
}

编程语言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>

如果你需要额外的代码请咨询或参阅github上

Github上含有All the code

解释，当你运行github：前往http://localhost:3000/#/projectdetail/5并点击左侧栏上的另一个项目。然后你看到这个问题！

来源

2016-09-26 kevingoos

你能否提供更多的代码？ –

明天我会做！ :) – kevingoos

@AlexanderCiesielski我添加了所有的代码和图像 – kevingoos

你被正确地传递ID的数组的成分，但你从来不听所做的更改，以便有一个快速修复您：

在programminglanguages.component.ts更改此代码：

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

到

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

和

export class ProgrammingLanguages implements OnInit {

到

export class ProgrammingLanguages implements OnInit, OnChanges {

最后加入这个生命周期的功能，你类主体：

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

来源

2016-09-30 10:33:16 MatWaligora

如果你不使用它，为什么要导入'SimpleChanges'？ – yurzui

它只是对变化的类型声明，对他来说可能不是必需的，所以他可以在没有参数的情况下离开。我离开它，因为我正在检查值:) – MatWaligora

从代码中删除它:-) – MatWaligora

Angular2：组件不更新

回答

相关问题