角型部品通信2

Question

おそらくシンプルですが、私は狂っています。 第一成分は親

export class CompaniesComponent { 
    companies: Company[]; 
    companiesShown: Company[]; 
} 
constructor(private _companiesService: CompaniesService) { 
    this._companiesService.getCompanies().subscribe(data => { 
     this.companies = JSON.parse(data.text()); 
     this.companiesShowed = this.companies; 
    }); 
} 

テンプレートは、このようなものですされています

.. 
<tr *ngFor="let company of companiesShowed"> 
    <td>{{ company.name }}</td> 
</tr> 
.. 
<app-pagination [data]="companies" [(dataShown)]="companiesShown"></app-pagination> 

は最後に、子どもたちは、このようなものです：

export class PaginationComponent implements OnChanges { 
    @Input() data: Object[]; 
    @Input() dataShown: Object[]; 
    ngOnChanges() { 
    if (this.data != null && this.data.length > 0) { 
     this.dataShown = this.data; 
     console.log(this.dataShown); 
    } 
} 
} 

CONSOLE.LOGは私に右の長さを与えますdataShownの、しかし、親にはいつも未定義/長さゼロ...なぜですか？ ありがとう！

Answer 1

仕事に

[(dataShown)]="companiesShown" 

のような "双方向バインディング" の場合は、あなたの子コンポーネントは

子から親への更新を

this.dataShownChange.emit([{x: 'y'}]); 

のように送られ

@Input() dataShown: Object[]; 
@Output() dataShownChange: EventEmitter<Object[]> = new EventEmitter<Object[]>(); 

を必要とします

も参照してください。https://angular.io/docs/ts/latest/guide/template-syntax.html#!#two-way