Использовать значение модели обновления внутри функции jquery в угловых 4

Question

У меня есть выпадающий список, и я должен выполнить некоторую задачу через функцию jquery после обновления модели.Мой ngmodel ([(ngModel)]="books") обновляется, когда запускается событие изменения выпадающего списка.но я не получаю обновленное значение модели ([(ngModel)]="books") в функции jquery.PLZ Help Я хочу использовать обновленное значение модели моей функции jquery.Вот мой код

HTML-часть:

<select id="c1"   [(ngModel)]="book" name="book" (change)= "GetBook()" >
  <option *ngFor="let bk of book.bookdetails">{{bk.books}}</option>
</select>

<input  id="t1" name="book" type="text" [(ngModel)]="books">

Код в составной части

jquery функция:

$(document).on('change', '#c1', () => {
  var b1=  $('#t1').val();
});

функция изменения выпадающего списка

GetBook(){
  this.book.GetBook()
   .subscribe(response =>{
     this.books=response[0].Books
   });
}

Answer 1

Прежде чем пытаться использовать jQuery , сначала добавьте jQuery к angular.json файлу в "scripts": [...].

Для использования jQuery это наиболее безопасноспособ использования jQuery Я пробовал до сих пор.

TS

....
declare let $: any;

@component({
  selector: '...',
  templateUrl: ['...'],
  styleUrls: ['...']
})
export class JqueryExampleComponent implements onInit {

  constructor(private eleRef: ElementRef) {}

  ngOnInit() {
    const root = $(this.eleRef.nativeElement);
    root.find('#t1').on('change', function() {
      // Code
    });
  }
}

, когда вы используете $(this.eleRef.nativeElement), который получит корень дерева из component dom, затем .find('...'), чтобы получить нужный элемент, затем используйте синтаксис jQuery event, как вы всегда делаете.

ПРИМЕЧАНИЕ: не использовать функцию стрелки () => {...} с синтаксисом jQuery вместо использования анонимная функция function() {...}, где arrow function не знает *Ключевое слово 1040 * и большая часть кода сценария jQuery на основе ООП.

Решение 1

Если вы хотите вызвать jquery function после GetBook() метод , вы можете использовать Observables для достижения этого.

TS

import { Component } from '@angular/core';
import { Observable, Observer } from 'rxjs';

declare let $: any;

@Component({...})
export class AppComponent {
  isHidden = false;

  constructor(private eleRef: ElementRef) {}

  fun() {
    return new Observable((observer: Observer<any>) => {
      observer.next(
        this.book.GetBook().subscribe(response =>{
          this.books=response[0].Books
        });
      );
      observer.next(
        const root = $(this.eleRef.nativeElement);
        root.find('#c1').on('change', function() {
          let b1=  root.find('#t1').val();
        });
      );
    }).subscribe();
  }

}

HTML

<select id="c1" [(ngModel)]="book" name="book" (change)="fun()"></select>

уведомление: fun() не GetBook() on change

что произойдет, когда select выпадающий change Observable выполнит первый observer, то есть this.book.GetBook().subscribe(...), затем послевыполнит jquery function, затем завершит Observable

Решение 2

Вы можете выполнить jQuery functionвнутри GetBook(), который предположительно не выполняет функцию jQuery до тех пор, пока GetBook() не выполнится и не получит данные subscribe ... это должно выглядеть так

GetBook() {
  this.book.GetBook().subscribe(response =>{
    this.books=response[0].Books;
    root.find('#c1').on('change', function() {
      let b1=  root.find('#t1').val();
    });
  });
}