Question

我有一个下拉列表，更新模型后，我必须通过jquery函数执行一些任务。触发下拉列表的更改事件时，我的ngmodel ([(ngModel)]="books")已更新。但我无法在jquery函数中获取更新的模型([(ngModel)]="books")值。请帮助我要使用更新的模型值我的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语法。

注意：请勿将 arrow函数 () => {...}与 jQuery 语法一起使用，而应使用匿名函数 function() {...}，其中arrow function不知道this关键字以及大多数基于OOP的 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()不是change

将要发生的是select 下拉 change Observable将执行第一个observer，即this.book.GetBook().subscribe(...)然后执行jquery function之后，然后 complete Observable

解决方案2

您可以在function内执行本应不执行 jQuery函数的 jQuery GetBook()，直到执行GetBook()并获取{ {1}}数据...看起来应该像这样

subscribe

在angular 4的jquery函数中使用更新模型值

1 个答案: