Deux voies de liaison avec angulaire 2

Question

J'ai une entrée dans laquelle je suis en utilisant la syntaxe de liaison 2 voies pour remplir sa valeur comme si dans un composant séparé:

<input type="text" [(ngModel)]="this.inputValue" id="itemText"> 

Et dans mon index.html, je mets la valeur de inputValue:

onSelect: function (request, response) { 
      this.inputValue = request.item; 
    } 

Cependant, mon entrée est mise à jour avec cette nouvelle valeur, qu'est-ce que je manque?

Edit: Le composant est donc comme la configuration:

@Component({ 
    selector: 'app-leftpane-table', 
    templateUrl: './leftpane-table.component.html' 
}) 
export class LeftpaneTableComponent implements OnInit { 
    inputValue:any; 
    constructor(private ds: DataService) { } 

    ngOnInit() {} 

Et dans index.html Je suis en train InputValue fois qu'un élément a été sélectionné parmi les résultats de la recherche:

$('.ui.search') 
    .search({ 
    apiSettings: { 
     url: 'http://localhost:8088/Badges/{query}' 
    }, 
    onSelect: function (request, response) { 
     var urlApi = 'http://localhost:8088/Badges/Details/' + request.item; 
     this.inputValue = request.item; 
    } 
}); 

Answer 1

Ne pas utilisez this dans les modèles angulaires. Votre entrée devrait ressembler à ceci:

<input type="text" [(ngModel)]="inputValue" id="itemText"> 

EDIT:

Lorsque vous faites référence à this en fonction onSelect, vous ne fait pas référence à la composante angulaire - vous référence à la fonction. Ce que vous pouvez faire est de faire référence à this avant que la fonction jQuery:

const componentRef = this; 
$('.ui.search') 
    .search({ 
    apiSettings: { 
     url: 'http://localhost:8088/Badges/{query}' 
    }, 
    onSelect: function (request, response) { 
     var urlApi = 'http://localhost:8088/Badges/Details/' + request.item; 
     componentRef.inputValue = request.item; 
    } 
}); 

Et utiliser cette référence au lieu this mot-clé.