Блог

Главная - Вопросы по программированию - Привязка входного значения Angular 10 изменена с помощью jquery.val()

Привязка входного значения Angular 10 изменена с помощью jquery.val()

#angular

#angular

Вопрос:

Я использую bootstrap-автозаполнение, но привязанная модель не обновляется при выборе значения.

Я просмотрел исходный код начальной загрузки с автозаполнением, и он использует jQuery.val() для присвоения выбранного значения, и похоже, что если используется jQuery.val(), модель не обновляется.

 -- template
<input id="test" class="form-control" type="text" autocomplete="off" [(ngModel)]="myValue">
Angular Model: {{myValue}}
<br />
Jquery Val: {{getJqueryValue()}}


-- component
import { Component, AfterViewInit } from '@angular/core';
import 'bootstrap-autocomplete'
declare const $: any;
@Component({
  selector: 'app-app-list',
  templateUrl: './app-list.component.html',
  styleUrls: ['./app-list.component.css']
})
export class AppListComponent implements AfterViewInit {
  public myValue: string;
  ngAfterViewInit(): void {
    $('#test').autoComplete({
      resolver: 'custom',
      events: {
        search: function (qry, callback) {
          callback(["google", "yahoo", "amazon"])
        }
      }
    });
  }
  getJqueryValue() {
    return $('#test').val();
  }
}

введите описание изображения здесь

Как я могу заставить Angular понять, что значение изменено?

К вашему сведению, я не могу использовать Angular material или другое автозаполнение, совместимое с angular.

https://stackblitz.com/edit/angular-playground-6dpemy?file=app/app.component.ts

Комментарии:

1. вы могли бы использовать (blur)="setAngularModel(getJqueryValue())" в своем <input> теге. Кроме того, если вы используете angular, вам не следует использовать jquery

2. @rhavelka, я знаю, что использовать Jquery в Angular в целом нехорошо, но есть некоторые случаи, когда этого нельзя избежать, и у меня есть свои причины, по которым я использую плагины Jquery в своем проекте. Я только что попробовал ваше решение, но оно не работает, потому что при вызове blur значение еще не присвоено. Итак, когда я набираю «yah» и нажимаю «yahoo», $(«#test»).val() возвращает «yah», а не «yahoo».

3. Не уверен, поможет ли это. добавьте private changeRef: ChangeDetectorRef в свой конструктор. Затем попробуйте использовать changeRef.detectChanges() после выбора.

4. Как насчет того, чтобы изменить событие autocomplete.select и изменить обработчик на $('#test').on('autocomplete.select', (ev, item) => this.myValue = item); , сработало бы это? Вот скрипка без Angular, хотя.

5. Я добавил ответ с решением, о котором я упоминал. Тем не менее, либо ответы @naveen, либо мои решат проблему. Удачи 🙂

Ответ №1:

Используя ваш StackBlitz в качестве ссылки, я смог создать это решение:

Шаблон

 <!--   | Add a template reference so you can grab this element from your component. -->
<!--   v Name it what ever you like. -->
<input #test id="test" class="form-control" type="text" autocomplete="off" [(ngModel)]="myValue">

Компонент

 export class YourComponent implements AfterViewInit {
    public myValue: string;
    @ViewChild('test') test: ElementRef; // <- The name in quotes must match on the template

     ngAfterViewInit(): void {
         $('#test').autoComplete({
             resolver: 'custom',
             events: {
                 search: function (qry, callback) {
                     callback(["google", "yahoo", "amazon"])
                 }
             }
          });
          $('#test').on('autocomplete.select', (ev, item) => {              
              this.test.nativeElement.dispatchEvent(
                  new CustomEvent('input', { bubbles: true })
              );
          });
     }
}

Демонстрация
https://stackblitz.com/edit/angular-playground-r3s5b3?file=app/app.component.ts

Ответ №2:

Это сделает

 $('#test').on('autocomplete.select', (ev, item) => {
  this.myValue = item;
});

Ссылка: https://stackblitz.com/edit/angular-jq-autocomplete-z6bc1r