Heim > Artikel > Web-Frontend > Informationen zur Verwendung des Pipe-Operators (|) in Angular
Normalerweise müssen wir Pipes zum Formatieren von Daten verwenden. Der folgende Artikel stellt hauptsächlich die Verwendung des Pipe-Operators (|) in Angular vor. Freunde, die ihn benötigen, können ihn als Referenz verwenden mit dem Herausgeber unten.
Was ist eine Pipeline?
Angulars Pipeline kann als Werkzeug zur Datenformatierung und -anzeige betrachtet werden. Pipes können Daten für die Anzeige formatieren, ohne die Quelldaten zu ändern. Was die Anzeige von Datumsangaben betrifft, können Sie beispielsweise Pipeline 1 verwenden, um Quelldaten im Format jjjj/MM/tt anzuzeigen, oder Sie können Pipeline 2 verwenden, um sie im Format 28. Februar 2017 anzuzeigen. Die ursprünglichen Daten sind jedoch immer noch aktuell und haben sich nicht geändert. Mithilfe von Pipelines können wir den Inhalt der Datenformatierung trennen und ihn unabhängig machen. Wenn Formatierung und Anzeige erforderlich sind, wählen Sie einfach die entsprechende Pipeline zur Verarbeitung aus.
1. Vorlagenausdrucksoperatoren
Die Vorlagenausdruckssprache verwendet eine Teilmenge der JavaScript-Syntax und fügt mehrere zusätzliche Spezialoperatoren für bestimmte Szenarien hinzu: Pipelinebetreiber, sichere Navigationsbetreiber.
2. Pipe-Operator (|)
Das Ergebnis des Ausdrucks erfordert möglicherweise eine gewisse Konvertierung vor der Bindung. Beispielsweise möchten Sie möglicherweise Zahlen als Beträge anzeigen, die Großschreibung von Text erzwingen oder eine Liste filtern und sortieren.
Winkelige Rohrobjekte sind eine praktische Wahl für kleine Transformationen wie diese.
Eine Pipe ist eine einfache Funktion, die einen Eingabewert akzeptiert und das Transformationsergebnis zurückgibt.
Angulars häufig verwendete integrierte Pipe-Funktionen:
DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipi, PercentPipe, JsonPipe usw.
Sie werden in Vorlagenausdrücken verwendet. Verwenden Sie einfach den Pipe-Operator (|) .
Verwendung
Der Pipe-Operator übergibt das Ausdrucksergebnis auf seiner linken Seite an die Pipe-Funktion auf seiner rechten Seite. Ausdrücke können auch über mehrere Pipes verkettet werden.
<p> Title through a pipe chain: {{title | uppercase | lowercase}} </p>
Häufige Beispiele:
<p class="alert alert-warning"> <p>{{title|uppercase }}</p> <p>{{title|uppercase|lowercase }}</p> <p>{{this|json}}</p> <p>{{time|date:'yyyy-MM-dd'}}</p> <p>{{number|percent}}</p> <p>{{number|currency:'CNY'}}</p> </p>
ts-Attribute:
export class AppComponent { title = 'app'; name = '张三丰'; time = new Date(); number = 1.123; show(str: string) { str += '---测试'; return str; } }
Ergebnisse anzeigen:
Das Obige ist, was ich Ich habe es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
So zeigen Sie Eingabeinhalte in Angular an
So fragen Sie die Wettervorhersage in Angular ab
Wie man Feiertage in js beurteilt
Wie man die Message-Board-Funktion in JS implementiert
Wie man es in nodejs macht Implementieren Sie die OAuth2.0-Autorisierungsdienstauthentifizierung
So erstellen Sie ein Vue-Projekt auf Webpack
So implementieren Sie es in VueLesen Sie den vollständigen Text
So erhalten Sie Dom-Elemente in Vue
So konvertieren Sie das Zeitstempelformat in js
auf Nginx Stellen Sie das Vue-Projekt bereit (ausführliches Tutorial)
So implementieren Sie einen Wasserfallfluss mit zufälligem Layout in ionic3
Das obige ist der detaillierte Inhalt vonInformationen zur Verwendung des Pipe-Operators (|) in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!