Wie referenziere ich einen Eingang in Angular 4?

Ich habe die folgende Aufgabe, die ich erreichen möchte: Benutzer werden auf ein Eingabeelement eingeben und divs wird unter der Eingabe mit verwandten Ergebnissen angezeigt. Wenn ein Teil ausgewählt ist, wird sein Text dem Eingang zugewiesen. Es ist eine typische Autocomplete-Funktionalität.Wie referenziere ich einen Eingang in Angular 4?

|celio | -> this is the input       |celio mendez| 
<celio batista> -> div   after selecting the div 
<celio mendez> -> div

Meine Vorlage:

<input id="tbPlaceholder" (click)="search($event.target.value)" /> 

<div *ngFor="let address of data"> 
<div (click)="selectAdress($event.target.innerText)"> {{ address.street}}</div>

In meinem Code möchte ich die Eingabe mit der ID von tbPlaceholder verweisen, so kann ich es auf den Text des ausgewählten div eingestellt. Das Problem ist, dass ich don‘t wissen, wie die tbPlaceholder referenzieren

selectAdress(address: String) : void 
{ 
    //how to reference tbPlaceholder? 
}

Quelle

2017-12-19 Diego Alves

Lesen Sie die eckige Dokumentation über Formulare. Verwenden Sie ngModel (d. H. 2-Wege-Bindung) oder eine reaktive Form (d. H. FormControl). Sie müssen nicht auf die Eingabe verweisen. Nur um den Text im Modell zu ändern, an den die Eingabe gebunden ist. Gleiches für $ event.target.innerText. Verwenden Sie das DOM nicht. Verwenden Sie Ihr Modell und ersetzen Sie das durch 'selectAddress (address)'. –

Einige Bibliotheken erlauben, dass, wie Angular Material and its autocomplete. Aber vielleicht können Sie es nicht verwenden, so geht es hier:

Zuerst müssen Sie Ihre Daten ein:

data = ['result 1', 'result 2', 'result 3'];

Und Sie haben Ihre Form Artikel:

autocompleteQuery: string;

Nun, meine Lösung für Sie ist es, ein Rohr zu verwenden, wenn Sie wissen, wie man es benutzt, hier geht es:

transform(results: string[], query: string): string[] { 
    return query ? 
    results.filter(r => r.toUpperCase().includes(query.toUpperCase())) : 
    results; 
}

Dieses Rohr wird gefilterte Ergebnisse i f Ihre Abfrage existiert oder alle Ergebnisse, wenn die Abfrage leer ist.

Jetzt, wo Sie Ihre Pfeife haben, sehen Sie die Ergebnisse in Ihrem HTML angezeigt werden müssen:

<input type="text" [(ngModel)]="autocompleteQuery" /> 
<ng-container *ngIf="autocompleteQuery"> 
    <div *ngFor="let d of data | myFilteringPipe:autocompleteQuery">{{d}}</div> 
</ng-container>

Und jetzt, sollte diese Arbeit.

Quelle

2017-12-19 08:23:21 trichetriche

Wie referenziere ich einen Eingang in Angular 4?

Antwort

Verwandte Themen