при изменении событие не запускается

Question

Я работаю над небольшим приложением Angular, и когда моя страница загружается, я хочу получить значение из раскрывающегося списка select2. Вот мой код:

ngAfterViewInit(): void {

console.log("this happen?");

if (this._globals.isAdmin === false) {
  console.log("first condition is executed cuz logged in user is not admin?")
  $('#selected-user').val(this.person[0].id).trigger('change');
}
else {
  $('#selected-user').val(this.helper.emptyGuid()).trigger('change');
}

// This is not executed
$('#selected-user').on(
  'change',
  (e) => {
    this.searchQuery.personId = $(e.target).val().toString();
    console.log("This is not executed when page loads:", this.searchQuery.personId);
  });
}

Вот результат из console.log:

Как видите, даже если я установил $('#selected-user').val(this.person[0].id).trigger('change'); в первом состоянии, оно не выполнено. Как получилось?

Answer 1

Вам не нужно писать события изменения в угловых. Вы можете просто связать свой выпадающий список со свойством и использовать событие change для вызова функции, которая может установить ваши параметры для searhQuery. Это то, что я предлагаю.

selectedPersonId: any;
constructor(private dashBoardService: DashboardService) {
    if (this._globals.isAdmin === false) {
      console.log("first condition is executed cuz logged in user is not admin?")
      this.selectedPersonId = this.person[0].id;
    }
    else {
        this.selectedPersonId = this.helper.emptyGuid();
    }
    this.searchQuery.personId = this.selectedPersonId;
}
changePerson(){
    this.searchQuery.personId = this.selectedPersonId;
}

, а затем используйте changePerson в раскрывающемся списке, например (change)="changePerson()".

<select (change)="changePerson()" [(ngModel)]="selectedPersonId">

Answer 2

Если вы используете angular, почему вы не используете ng-change. Попробуйте следовать стандартам. Если вы создаете угловое приложение, попробуйте использовать все функции только угловых.

Answer 3

Использовать угловые нативные события, созданные в jquery:

См: https://stackblitz.com/edit/angular-4nzd4c?file=src%2Fapp%2Fapp.component.ts

app.component.html

<select (change)="selectUserChange($event)">
  <option value="User-1">User-1</option>
  <option value="User-2">User-2</option>
  <option value="User-3">User-3</option>
  <option value="User-4">User-4</option>
</select>

<p *ngIf="currentSelectedUser">Current Selecte user is: {{currentSelectedUser}}</p>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  currentSelectedUser:any;

  selectUserChange(event){
    let selecetedItem=event.target.value;
    this.currentSelectedUser=selecetedItem;
  }
}