Select-Element an Objekt in Angular 2 binden

Angular 2 ist ein beliebtes Framework, das zum Erstellen von Web-Apps verwendet wird. Eine der häufigsten Aufgaben in Angular 2 ist das Binden eines ausgewählten Elements an ein Objekt.

In diesem Artikel erfahren Sie, wie Sie die Direktiven ng-for und ng-value verwenden, um ein ausgewähltes Element mit einem Objekt in Angular 2 zu verbinden.

Verwenden Sie ng-for und ng-value, um ein ausgewähltes Element an ein Objekt in Angular 2 zu binden

Ng-For ist eine eingebaute Template-Direktive, die es ermöglicht, eine Sammlung von Elementen, wie ein Array oder ein Objekt, einfach zu durchlaufen und für jedes ein Template zu erstellen.

*ngFor="let <value> of <collection>"

Die Direktive ng-value bindet das select-Element an ein Objekt. Es gibt den Namen der Eigenschaft für das Objekt an, das dem Wert des ausgewählten Elements zugeordnet werden soll.

 <input ng-value="expression"></input>

Manchmal verwechseln Anfänger den ng-value und den value. Wenn Sie also daran arbeiten, ein ausgewähltes Element mit einem Objekt in Angular 2 zu verbinden, müssen Sie den Unterschied zwischen ng-value und value kennen.

der Unterschied zwischen dem ng-value und dem value in Angular

Der Unterschied besteht darin, dass value immer ein String ist, während ngValue die Übergabe eines Objekts erlaubt. Sie haben beispielsweise einen Anwendungsfall, in dem Sie die Namen der Elemente in der Dropdown-Liste anzeigen müssen.

Und wenn Sie ein einzelnes Objekt aus dem Menü auswählen, müssen Sie die ID des Objekts auswählen, um die Datenbank zu durchsuchen. Es würde helfen, in einem solchen Szenario ngValue zu verwenden, da es ein Objekt benötigt.

Außerdem sollte das Objektmodell, das Sie füllen möchten, in Ihrem Objekt definiert sein.

Klicken Sie hier, wenn Sie mehr über den ng-value erfahren möchten.

Schritte zum Binden eines ausgewählten Elements an ein Objekt in Angular 2

Nachfolgend sind einige grundlegende Schritte aufgeführt.

1. Fügen Sie dem select-Element das Attribut ng-model hinzu.
2. Fügen Sie dem Objekt, an das Sie binden möchten, das Attribut ausgewählt hinzu.
3. Binden Sie die Objekteigenschaft mit einer Syntax in geschweiften Klammern, {{obj.property}}, an das select-Element.

Lassen Sie uns ein Beispiel haben, das uns hilft, alle Schritte im Detail zu verstehen.

Zunächst erstellen wir eine Komponente namens AppComponent. Dann erstellen wir ein Schnittstellenobjekt mit dem Namen example, das id und name anzeigt.

In diesem Fall speichern sowohl id als auch name Strings. Nach den beiden obigen Schritten ist es an der Zeit, die Optionen zu ändern, indem Sie einige Informationen hinzufügen.

Der vollständige /app.component.ts-Code ist unten angegeben.

import { Component } from '@angular/core';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Demo';

  selectedObject : example;
  SimpleExample = [
    {id: 'Welcome to New York City', name: 'New York'},
    {id: 'Welcome to Japan', name: 'Japan'},
    {id: 'Welcome to Singapore', name: 'Singapore'},
    {id: 'Welcome to Delft', name: 'Delft'}
  ]
}

interface example{
  id:string;
  name:string;
}

In der Datei component.ts haben wir eine Variable s selectedObject hinzugefügt, ein Objekt example, und wir werden es mit ngModel an das select-Element binden.

Eine weitere Variable, SimpleExample, enthält eine Sammlung von Objekten, die zum Anzeigen von ngValue-Auswahloptionen verwendet werden.

Der vollständige /app.component.html-Code ist unten angegeben.

<h2>Angular 2 Select Example</h2>

<select [(ngModel)]="selectedObject">
<option *ngFor="let show of SimpleExample" [ngValue]="show">
{{show.name}}
</option>
</select>

{{selectedObject | json}}

Das Objekt example wurde nun zum s selectedObject hinzugefügt. Und wir haben JSON-Pipe verwendet, um es anzuzeigen.

Die JSON Pipe kann ein Eingabeobjekt in das gewünschte Ergebnis umwandeln, das dann einer Variablen zugewiesen oder als Argument übergeben werden kann. Es verwendet die eingebaute JavaScript-Funktion JSON.stringify(), um die Daten in einen JSON-String umzuwandeln.

Um mehr über Angular JSON Pipe zu erfahren, hier klicken.

Wir erhalten die folgende Ausgabe des oben genannten Beispiels.

Klicken Sie hier, um den oben erwähnten vollständigen Arbeitscode zu überprüfen.