Question

所有。两个组件之间发送字符串格式的问题。

我创建了儿童组件

滤波器-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文件中它不适用于字符串，但如果我尝试发送号码，那么效果很好

Answer 1

我发现了错误。 filterByName：字符串; @Output（）searchNameChange = new EventEmitter（）;

必须是 filterByName：字符串; @Output（）filterByNameChange = new EventEmitter（）;

带字符串的双向数据绑定Angular 2错误

1 个答案: