雙向數據綁定Angular 2錯誤與字符串

全部。兩個組件之間發送字符串格式的問題。雙向數據綁定Angular 2錯誤與字符串

創建子組件

過濾器，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; 
    }`

和HTML模板

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

在父組件我試圖讓FILTERNAME

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

並創建filterNameField：string =''; .ts文件它不適用於字符串，但如果我嘗試發送號碼，效果不錯

來源

2017-02-27 Roma Movchan

爲什麼要顯式觸發事件ngModelChange？提供更多關於你的期望的信息？ – Aravind

我想從輸入字段接收數據，需要文本值 –

其中是組件中的輸入字段？ – Aravind

我發現錯誤。 filterByName：string; @Output（）searchNameChange = new EventEmitter（）;

必須是 filterByName：string; @Output（）filterByNameChange = new EventEmitter（）;

來源

2017-02-27 19:25:18

雙向數據綁定Angular 2錯誤與字符串

回答

相關問題