双向数据绑定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错误与字符串

回答

相关问题