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：組件不更新

回答

相關問題