2017-02-27 3 views
1

alle. Problem mit dem Sendezeichenformat zwischen zwei Komponenten.Zwei-Wege-Datenbindung Angular 2 Fehler mit Strings

Ich schaffe Kinder Komponenten

Filter-panel.component.ts

`@Component({ 
    selector: 'as-filters-panel', 
    templateUrl: './filters-panel.component.html', 
    styleUrls: ['./filters-panel.component.css'] 
}) 
export class FiltersPanelComponent implements OnInit, AfterContentInit { 

    filterByName:string; 
    @Output() searchNameChange = new EventEmitter<string>(); 

    categories : Category[]; 
    subscribe : Subscription; 

    constructor(public categoryService : CategoryService, public router : Router) { 

    } 

    @Input() get filterName() { 
    console.log(this.filterByName); 
    return this.filterByName; 
    } 

    set filterName(val) { 
    this.filterByName = val; 
    this.searchNameChange.emit(this.filterByName); 
    } 

    onNameChange(model: any) { 
    this.filterName = model; 
    }` 

und HTML-Vorlage

<input class="filterInput" type="text" [ngModel]="filterName" (ngModelChange)= "onNameChange($event)"> 

In geordneten Komponente i versuchen filter

<as-filters-panel [(filterName)]="filterNameField" [(selectedSort)]="sortByField"></as-filters-panel> 
zu erhalten

und create filterNameField: string = ''; in .ts Datei Es funktioniert nicht mit Zeichenfolge, aber wenn ich versuche, Nummer zu senden, funktioniert gut

+0

Warum möchten Sie explizit das Ereignis ngModelChange auslösen? geben Sie mehr Informationen über Ihre Erwartungen? – Aravind

+0

Ich möchte Daten vom Eingabefeld empfangen, benötige Textwerte –

+0

Wo ist das Eingabefeld in Ihrer Komponente? – Aravind

Antwort

0

Ich habe Fehler gefunden. filterByName: Zeichenfolge; @Output() searchNameChange = new EventEmitter();

muss sein filterByName: string; @Output() filterByNameChange = new EventEmitter();