Компоненты связи в Угловом 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" 

работать, ваш ребенок компонент должен

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

где обновление от ребенка к родителю отправляется как

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

См. Также https://angular.io/docs/ts/latest/guide/template-syntax.html#!#two-way