Angular4“更改”监听器仅触发一次

Question

I have a selection dropdown that I'm drawing data from that changes based on the selection. It will fire fine on first load, but wont change again until I reload or redirect.

    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
      })
    })
  })

}

I am calling this on the component's "ngOnInit", maybe that's the issue? Any ideas would be helpful.

Answer 1

This may helps you.

Add this code in imports of Module.ts

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

Inside component.ts

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

In Component.html

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

Answer 2

Thanks for all the advice, but I managed a work around. The biggest hurdle is that the select was in a different component (which I apologize for failing to mention) so I had to export the select information to my component where the info would be displayed.

component2.ts

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

And then a set a delay so that it would initiate the listen after both components are fully loaded. It seems it was firing before in my previous version

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);
}

Much appreciated!