在@Input（）之後，數組是否改變爲對象？

Question

我是Angular 2的新手，我想通過@Input（）將一個在父組件中創建的數組傳遞給它的子節點。

在父項中，我創建數組，從服務中添加數據並將其顯示在控制檯（控制檯輸出1）中。在子組件中，我使用ngOnChanges再次在控制檯中顯示它（控制檯輸出2）。正如你在下面看到的，數組的長度從12變爲0.我想這是因爲當數組傳遞給子對象時，數組變成了對象？

我該如何解決這個問題？

父

import { Component, OnInit } from '@angular/core'; 
import { Module, MapMarkerData } from './coreclasses'; 
import { TimelineService } from './input.service'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/app.component.html', 
    providers: [TimelineService] 
}) 

export class AppComponent implements OnInit { 
    modules: Module[]; 
    mapMarkerData: any; 

    constructor(private timelineService: TimelineService) { 
    this.mapMarkerData = new Array<MapMarkerData>(); 
    } 

    getModules(): void { 
    this.timelineService.getModules().then(modules => {this.modules = modules; this.setMapModuleData(this.modules);}); 
    } 

    setMapModuleData(modules: Array<any>): void { 
    for (let module of modules) { 
     if (module.className) { 
     var id = module.id; 
     var className = module.className; 
     let contents: Object = {id: id, className: className}; 
     this.mapMarkerData.push(contents); 
     } 
    } 
    console.log(this.mapMarkerData); // CONSOLE OUTPUT 1 
    console.log(this.mapMarkerData.length); 
    } 
} 

兒童

import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core'; 
import { MapMarkerData } from './coreclasses'; 

@Component({ 
    selector: 'timeline-map', 
    templateUrl: 'app/timeline.map.component.html' 
}) 

export class TimelineMapComponent implements OnChanges { 
    @Input() 
    mapMarkerData: any; 

    ngOnChanges(changes: any) { 
     console.log(this.mapMarkerData); // CONSOLE OUTPUT 2 
     console.log(this.mapMarkerData.length); 
    } 
} 

父模板

... 
<div id="map" class="mapLarge"> 
    <timeline-map [mapMarkerData] = "mapMarkerData"></timeline-map> 
</div> 
... 

控制檯輸出1 陣列[12]：[對象，對象，...]

控制檯輸出2 數組[0]：[對象，對象，...]

Answer 1

EDIT重要

，因爲你傳遞相同的成子組件，所以ngOnChanges生命週期只發射1次。

請結帳這個版本中，打開您的控制檯選項卡：https://plnkr.co/edit/WUDGOx?p=preview

所以，如果你想抓住每一個變化ngOnChanges生命週期，必須通過差異陣列，像這樣：https://plnkr.co/edit/8awiqe?p=preview

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

@Component({ 
    selector: 'app-root', 
    template: ` 
    <h2>App Component</h2> 
    <p><strong>This app will trigger ngOnChanges with immutable array</strong></p> 
    <app-content [posts]="posts"> 
    </app-content> 
    ` 
}) 
export class AppComponent implements OnInit { 
    latestPosts: any[] = []; 
    posts: any[] = []; 


    ngOnInit() { 
    // fake api call 
    setTimeout(() => { 
     this.latestPosts.push.apply(this.latestPosts, [ 
     {name: 'Post no.1'}, 
     {name: 'Post no.2'}, 
     {name: 'Post no.3'} 
     ]); 
     this.posts = [].concat(this.latestPosts); 
    }, 300); 
    } 

} 

===第二選擇===你可以自己檢查DoCheck生命週期：https://plnkr.co/edit/oxsISD?p=preview

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

@Component({ 
    selector: 'app-content', 
    template: ` 
    Status: {{ status }} 
    <div *ngFor="let post of pp"> 
     {{ post.name }} 
    </div> 
    ` 
}) 

export class ContentComponent implements DoCheck { 

    @Input() 
    posts: any[]; 
    differ: IterableDiffers; 
    status: string = ''; 

    constructor(private differs: IterableDiffers) { 
     this.differ = this.differs.find([]).create(null); 
    } 

    ngDoCheck() { 
    var changes = this.differ.diff(this.posts); 
    if (changes) { 
     console.log('ngDoCheck'); 
     this.status = 'ngDoCheck invoked!' 
    } 
    } 
} 

請注意，您必須支付費用，因爲上述ngDoCheck方法將在每次更改檢測運行時調用。

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

https://angular.io/docs/ts/latest/api/core/index/DoCheck-class.html

https://angular.io/docs/ts/latest/api/core/index/SimpleChange-class.html

https://angular.io/docs/ts/latest/api/core/index/IterableDiffers-class.html

END

初始狀態，它是空的，則該值將分配給該屬性。

JS登錄異步