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:&#39;yyyy-MM-dd&#39;}}</p> 
 <p>{{number|percent}}</p> 
 <p>{{number|currency:&#39;CNY&#39;}}</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!