* ngFor内の角2の変化の検出が動作しないようです（RC5）

Question

ng2モジュール内で関数が別のモジュールによって呼び出され、オブジェクトが作成され、テンプレートの* ngForにバインドされた配列にプッシュされます。ドキュメントhttps://angular.io/docs/ts/latest/api/common/index/NgFor-directive.htmlによれば、自動的に変更を検出するはずです。私は配列のログをコンソールに入れることができ、すべてがそこにありますがセレクタータグは空のままです。私がテストとして静的配列を使用する場合、それは動作します。 私は一見類似した質問をここで、他のサイトやドキュメントのChangeDetectorRefで見ましたが、私が見つけたのは数か月前のものでしたが、試してみるとエラーになりました。

これはmarker.component.htmlです：

<div *ngFor="let Marker of Markers" [ngStyle]="Marker.style" (click)="scrollXY(Marker.scrollX, Marker.scrollY)" class="cq"> 
    {{Marker.title}} 
</div> 

このmarker.component.ts：

import { Component } from '@angular/core'; 
import { Marker } from './marker'; 
import { WindowService } from '../../window.service'; 

@Component({ 
    selector: 'cm-marker', 
    templateUrl: 'marker.component.html', 
    styleUrls: ['marker.component.css'] 
}) 
export class MarkerComponent { 

    Markers: Marker[]; 
    nx0: number; 
    ny0: number; 
    nx1: number; 
    ny1: number; 

    constructor(private windowService: WindowService) { 
    this.Markers = [ 
     { 
     title: 'Token', 
     scrollX: 0, 
     scrollY: 0, 
     style: { 
     'position': 'absolute', 
     'z-index': (200 - 5), 
     'left': 199900 +'px', 
     'top': 199900 +'px', 
     'background-color': '#587188' 
     } 
    } 
    ] 
    } 

    scrollXY(x, y) { 
    this.windowService.scrollXY(x, y); 
    } 

    createMarker(cmelement, x: number, y: number, x1: number, y1: number) { 

    let m = (cmelement.y1 - cmelement.y0)/(cmelement.x1 - cmelement.x0); 
    let height = Math.abs(cmelement.y1 - cmelement.y0); 
    let width = Math.abs(cmelement.x1 - cmelement.x0); 
    let sin = (cmelement.y1 - cmelement.y0)/Math.sqrt(Math.pow(height, 2)+Math.pow(width, 2)); 
    let cos = (cmelement.x1 - cmelement.x0)/Math.sqrt(Math.pow(height, 2)+Math.pow(width, 2)); 
    let d = 400 * (1 - Math.sqrt(Math.abs(cos * sin))); 
    if(x1 == 0 && y1 == 0){ 
     this.ny0 = Math.ceil(y + (sin * d)); 
     this.nx0 = Math.ceil(x + (cos * d)); 
     this.ny1 = Math.ceil(y + height - (sin * d/2)); 
     this.nx1 = Math.ceil(x + width - (cos * d/2));    
    } 
    if(x1 == 0 && y1 != 0){ 
     this.ny0 = Math.ceil(y + height + (sin * d)); 
     this.nx0 = Math.ceil(x + (cos * d)); 
     this.ny1 = Math.ceil(y - (sin * d/2)); 
     this.nx1 = Math.ceil(x + width - (cos * d/2));    
    } 
    if(x1 != 0 && y1 == 0){ 
     this.ny0 = Math.ceil(y + (sin * d)); 
     this.nx0 = Math.ceil(x + width + (cos * d)); 
     this.ny1 = Math.ceil(y + height - (sin * d/2)); 
     this.nx1 = Math.ceil(x - (cos * d/2));    
    } 
    if(x1 != 0 && y1 != 0){ 
     this.ny0 = Math.ceil(y + height+ (sin * d)); 
     this.nx0 = Math.ceil(x + width + (cos * d)); 
     this.ny1 = Math.ceil(y - (sin * d/2)); 
     this.nx1 = Math.ceil(x - (cos * d/2));    
    } 
    let marker0 = { 
     title: cmelement.links[1].title, 
     scrollX: cmelement.x1, 
     scrollY: cmelement.y1, 
     style: { 
     'position': 'absolute', 
     'z-index': (200 - cmelement.prio), 
     'left': this.nx0, 
     'top': this.ny0, 
     'background-color': cmelement.style.object.color0 
     } 
    } 
    // console.log(marker0); 
    this.Markers.push(marker0); 
    let marker1 = { 
     title: cmelement.links[0].title, 
     scrollX: cmelement.x0, 
     scrollY: cmelement.y0, 
     style: { 
     'position': 'absolute', 
     'z-index': (200 - cmelement.prio), 
     'left': this.nx1, 
     'top': this.ny1, 
     'background-color': cmelement.style.object.color0 
     } 
    } 
    this.Markers.push(marker1); 
    // console.log(this.Markers); 

    } 
} 

予想通り "トークン" 書かれた静的が示され、加工されているが、新しく追加されたものはありません。 @ Carbonsound1のアドバイスに

Answer 1

おかげで私は解決策を見つけた：

機能は、親コンポーネントへのコンポーネントまたはディレクティブを@ViewChildbinds。

重要：RC6：以前は廃止された@ Component.directivesは削除されました。したがって、コンポーネント内で宣言するとエラーが発生します。その代わりに、app.moduleファイルの宣言で宣言する必要があります。

私は変更にCarbonsound1s plnkrをフォークしています

更新app.module.ts：

import { AppComponent } from './app.component'; 
import { MarkerComponent } from './marker.component'; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    CommonModule 
    ], 
    declarations: [ AppComponent, 
        MarkerComponent], 
    bootstrap: [ AppComponent ], 
    entryComponents: [ ] 
}) 
export class AppModule { } 

更新app.component.ts：

@Component({ 
    selector: 'my-app', 
    template: ` 
    <button (click)="createMarker()">create marker</button> 
    <my-marker></my-marker> 
    ` 
})