Gibt es eine Möglichkeit, die Länge der Zeichenfolge auf eine Anzahl von Zeichen zu beschränken? zum Beispiel: Ich muss eine Titellänge auf 20 begrenzen {{ data.title }}
.
Gibt es ein Rohr oder einen Filter, um die Länge zu begrenzen?
Gibt es eine Möglichkeit, die Länge der Zeichenfolge auf eine Anzahl von Zeichen zu beschränken? zum Beispiel: Ich muss eine Titellänge auf 20 begrenzen {{ data.title }}
.
Gibt es ein Rohr oder einen Filter, um die Länge zu begrenzen?
Zwei Möglichkeiten, Text in Winkel zu kürzen.
let str = 'How to truncate text in angular';
1. Lösung
{{str | slice:0:6}}
Ausgabe:
how to
Wenn Sie einen Text nach einer Slice-Zeichenfolge wie anhängen möchten
{{ (str.length>6)? (str | slice:0:6)+'..':(str) }}
Ausgabe:
how to...
2. Lösung (Benutzerdefiniertes Rohr erstellen)
Wenn Sie eine benutzerdefinierte Pipe abschneiden möchten
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'truncate'
})
export class TruncatePipe implements PipeTransform {
transform(value: string, args: any[]): string {
const limit = args.length > 0 ? parseInt(args[0], 10) : 20;
const trail = args.length > 1 ? args[1] : '...';
return value.length > limit ? value.substring(0, limit) + trail : value;
}
}
In Markup
{{ str | truncate:[20] }} // or
{{ str | truncate:[20, '...'] }} // or
Vergessen Sie nicht, einen Moduleintrag hinzuzufügen.
@NgModule({
declarations: [
TruncatePipe
]
})
export class AppModule {}
return value && value.length > limit ? value.substring(0, limit) + trail : value;
transform(value: string, args: string[]): string
sollte sein,transform(value: string, args: any[]): string
da das erste Argument, das der Pipe gegeben wird, eine Zahl ist.Rohr abschneiden mit optionalen Parametern:
- -
Vergessen Sie nicht, einen Moduleintrag hinzuzufügen.
Verwendung
Beispielzeichenfolge:
Markup:
quelle
limit = value.substr(0, 13).lastIndexOf(' ');
sollte aber seinlimit = value.substr(0, limit).lastIndexOf(' ');
.if (!value) { return ''; }
undif (value.length <= limit) { return value; }
${value.substr(0, limit)}${ellipsis}
; } `Sie können Text basierend auf CSS abschneiden. Es ist hilfreich, einen Text basierend auf der Breite und nicht auf dem festen Zeichen abzuschneiden.
Beispiel
CSS
HTML
Hinweis: Dieser Code wird für eine Zeile nicht für mehr als eine Zeile verwendet.
Ketans Lösung ist am besten geeignet, wenn Sie dies mit Angular tun möchten
quelle
Ich habe dieses Modul ng2 abgeschnitten , es ist ziemlich einfach, Importmodul und du bist bereit ... in {{data.title | abschneiden: 20}}
quelle
Hier ist ein alternativer Ansatz
interface
, der die Form eines Optionsobjekts beschreibt, das über daspipe
im Markup übergeben werden soll.Dann in Ihrem Markup:
quelle
Sehr einfach mit Slice Pipe (Winkelkernrohr), wie Sie gefragt haben
data.title
:Aus Angular Common Docs https://angular.io/api/common/SlicePipe
quelle
Wenn Sie eine Anzahl von Wörtern abschneiden und Auslassungspunkte hinzufügen möchten, können Sie diese Funktion verwenden:
Beispiel:
entnommen aus: https://github.com/yellowspot/ng2-truncate/blob/master/src/truncate-words.pipe.ts
Wenn Sie eine Anzahl von Buchstaben abschneiden möchten, aber keine Wörter ausschneiden möchten, verwenden Sie Folgendes :
Beispiel:
quelle
Ich habe gerade versucht, @Timothy Perez zu antworten und eine Zeile hinzugefügt
zu
quelle
Versuchen Sie dies, wenn Sie basierend auf Wörtern anstelle von Zeichen abschneiden möchten und gleichzeitig eine Option zum Anzeigen des vollständigen Textes zulassen möchten.
Kam hierher auf der Suche nach einer Read More-Lösung basierend auf Wörtern und teilte die Gewohnheit, die
Pipe
ich am Ende geschrieben habe.Rohr:
In Vorlage:
Komponente:
Im Modul:
quelle