2016-05-06 34 views
1

私のコンポーネントの1つに問題がありますが、モデルが変更されたときにモデルを放出しないように見えるという問題があります。それは私の他のコンポーネントのためにうまく動作しますが、これで私が何をしても動作しません。コンポーネントが親コンポーネントに戻りません

選択コンポーネント:

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> 

私が間違っているのか?

答えて

1

冗長on

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

プロパティ(入力および出力)の名前は除いて同一である必要は速記双方向結合構文[(...)]について

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

であるべきであり出力の接尾辞はChangeです。

+0

しかしそれはちょうど名前です..?他の方法でも動作しません。 – Chrillewoodz

+0

これは奇妙です..もう一度試してみました。私は最初から 'modelChange'が好きでしたが、onModelChangeがうまくいったと思っていましたが、どこでこれについての情報を見つけることができますか? – Chrillewoodz

+0

名前だけではありません。名前は重要です。私の更新された答えを見てください。この制限をクラスのプロパティ名に強制したくない場合は、 '@Input( 'model')myModel;' '@Output( 'modelChange')fancyName;のようなデコレータに名前を渡すことができます。 –

関連する問題