Angular4“改变”监听器只触发一次

时间:2018-05-24 19:09:55

标签: javascript angular addeventlistener lifecycle

我有一个选择下拉列表,我根据选择从这些更改中提取数据。它会在首次加载时触发,但在重新加载或重定向之前不会再次更改。

    getLogs(){
  document.getElementById("placeSelect").addEventListener('change', (e:any)=>{
    this.placeService.getPlace(e.target.value).subscribe((e:any)=>{        
      this.personService.person(e.data.place.person.id).subscribe((e:any) => {
        this.logs = e.data.person.logs
      })
    })
  })

}

我在组件的“ngOnInit”上调用它,也许这就是问题所在?任何想法都会有所帮助。

2 个答案:

答案 0 :(得分:0)

这可能对你有所帮助。

在Module.ts的导入中添加此代码

import { FormsModule } from '@angular/forms';
imports: [FormsModule]

在component.ts内部

 myModel(e: Event) {
    console.log(e);
  }

在Component.html中

   <select (ngModelChange)="myModel($event)" [ngModel]="mymodel">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">2</option>
</select>

答案 1 :(得分:0)

感谢您的所有建议,但我完成了一项工作。最大的障碍是选择是在一个不同的组件(我为没有提到而道歉)所以我不得不将选择信息导出到我的组件,其中将显示信息。

<强> component2.ts

import { userInfo } from '../../component1';

然后设置一个延迟,以便在两个组件完全加载后启动监听。它似乎在我以前的版本中被解雇了

ngOnInit() {
if(userInfo.place){
  this.getLogsfromPlace()
}    
setTimeout(()=>{
  this.startupUserInfo = userInfo
  document.getElementById("header").addEventListener('change', (e:any)=>{
  this._placeService.getPlace(userInfo.place).subscribe((e:any)=>{
    this._personService.person(e.data.place.person.id).subscribe((e:any) => {
      this.logs = e.data.person.logs
    })
  })
})  }, 3000);
}

非常感谢!