Компонент, не испускающий значение обратно к исходному компоненту

Question

У меня проблема с одним из моих компонентов, проблема в том, что он, похоже, не моделирует модель при изменении модели. Он отлично работает для моих других компонентов, но с этим он не работает независимо от того, что я делаю.

выберите компонент:

import {Component, Input, Output, EventEmitter, OnInit, DoCheck} from 'angular2/core'; 

@Component({ 
    selector: 'form-select', 
    templateUrl: './app/assets/scripts/modules/form-controls/form-select/form-select.component.html', 
    styleUrls: ['./app/assets/scripts/modules/form-controls/form-select/form-select.component.css'], 
    inputs: [ 
    'options', 
    'callback', 
    'model', 
    'modelProperty', 
    'optionProperty', 
    'disabled', 
    'allowEmpty', 
    'label' 
    ] 
}) 

export class FormSelectComponent implements OnInit, DoCheck { 
    @Input() model: any; 
    @Output() onModelChange: EventEmitter<any> = new EventEmitter(); 

    private isOpen: boolean = false; 
    private previousModel: any = null; 

    ngOnInit() { 

    // If no model is set and the select shouldn't be allowed empty, set the model to the first option 
    if (!this.model && !this.allowEmpty) { 
     this.model = this.options[0]; 
    } 
    // If it should be allowed empty, set it to null which will add an empty class in the markup 
    else if (this.allowEmpty) { 
     this.model = null; 
    } 
    } 

    ngDoCheck() { 

    // Check if the model changes and emit it if it does 
    if (this.previousModel !== this.model) { 
     this.onModelChange.emit(this.model); 
    } 

    this.previousModel = this.model; 
    } 

    toggle() { 

    if (this.disabled) { 
     this.isOpen = false; 

     return false; 
    } 

    this.isOpen = !this.isOpen; 
    } 

    close() { 
    this.isOpen = false; 
    } 

    select(option) { 
    this.model = option; 
    this.close(); 

    this.callback ? this.callback() : false; 
    } 

    isSelected(option) { 
    return option[this.modelProperty] === this.model[this.modelProperty]; 
    } 
} 

Когда я проверяю значение с pre величина остается той же, несмотря на модели изменяющемся внутри компонента:

<div class="col-xs-12 m-b-xxs"> 
    <pre>{{user.country}}</pre> 
    <form-select [(model)]="user.country" modelProperty="country" [options]="countries" optionProperty="country" label="Country"></form-select> 
</div> 

Что я делаю не так?

Answer 1

Существует резервный on

@Output() onModelChange: EventEmitter<any> = new EventEmitter(); 

должен быть

@Output() modelChange: EventEmitter<any> = new EventEmitter(); 

Для сокращенного двухстороннего-связывающим синтаксиса [(...)] имен свойств (входные и выходных) должны быть идентичны, за исключением Change суффикс для вывода.