Winkel 10 Eingabewertbindung geändert durch jquery.val ()

Question

Ich verwende Bootstrap-Autocomplete, aber das gebundene Modell wird bei der Auswahl eines Werts nicht aktualisiert.

Ich habe mir den Bootstrap-Autocomplete-Quellcode angesehen und er verwendet JQuery.val (), um einen ausgewählten Wert zuzuweisen. Wenn JQuery.val () verwendet wird, wird das Modell anscheinend nicht aktualisiert.

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

Wie kann ich Angular verständlich machen, dass der Wert geändert wird?

Zu Ihrer Information, ich kann kein Angular-Material oder eine andere winkelkompatible Autovervollständigung verwenden.

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

Answer 1

Mit Ihrem StackBlitz als Referenz konnte ich diese Lösung erstellen:

Vorlage

<!--   | 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">

Komponente

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

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

Answer 2

Das wird es tun

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

Verknüpfung: https://stackblitz.com/edit/angular-jq-autocomplete-z6bc1r