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>
私が間違っているのか?
しかしそれはちょうど名前です..?他の方法でも動作しません。 – Chrillewoodz
これは奇妙です..もう一度試してみました。私は最初から 'modelChange'が好きでしたが、onModelChangeがうまくいったと思っていましたが、どこでこれについての情報を見つけることができますか? – Chrillewoodz
名前だけではありません。名前は重要です。私の更新された答えを見てください。この制限をクラスのプロパティ名に強制したくない場合は、 '@Input( 'model')myModel;' '@Output( 'modelChange')fancyName;のようなデコレータに名前を渡すことができます。 –