Je définis un exemple de tuyaux dans mon application, qui transforme la chaîne en majuscules en minuscules ex: 'Activities' => 'activities '. Et les données sont au format Array et j'applique ce filtre sur * ngFor . Cela me renvoie une erreur disant que « toLowerString n'est pas une fonction», aidez-moi à comprendre où je vais mal.
5 Réponses :
Notez que .toLowerCase () est utilisable uniquement sur le type de données string . Cela dit, vous devez vous assurer que les données étaient une chaîne avec: .toString ()
export class LowerCasePipe implements PipeTransform {
transform(value: Array<string>) {
return value.map((x)=>{ return x.toLowerCase() })
}
}
Cela étant dit Thanveer Shah a été dit dans le comment vous pouvez utiliser | minuscules qui sont intégrées pour se transformer en chaîne.
Voir Fork pour les deux versions utilisées.
Clarification: Utilisé intentionnellement le code suivant:
export class LowerCasePipe implements PipeTransform {
transform(value) {
console.log(value.toString().toLowerCase());
for (let i = 0; i < value.length; i++) {
value[i] = value[i].toString().toLowerCase();
}
return value;
}
}
pour montrer que les données étaient un tableau.
Mais si vous comprenez déjà qu'il s'agissait d'un tableau, vous pouvez simplement utilisez:
value.toString().toLowerCase()
comme dans l ' autre réponse de Ferhad Othman .
merci beaucoup, j'ai compris votre point, mais j'essaye en fait de créer un composant de table. Et je voulais transformer le col en minuscule, c'est mapper à mon jeu de données, afin de construire des enregistrements. Pouvez-vous jeter un œil au code source mis à jour.
Facile. Il suffit de mettre en œuvre ma méthode ici, voir la mise à jour fourchue < / a>
J'ai eu la sortie nécessaire, Petite question, quand je suis déjà dans une boucle, c'est-à-dire NgFor, quel est le besoin d'ajouter une autre boucle for dans la fonction de transformation pip? Nous pourrions simplement passer le paramètre de texte et le convertir en minuscules et le renvoyer. Je n'ai pas compris la raison derrière cela.
Il n'y a pas vraiment besoin honnêtement. C'est juste pour vous permettre de savoir plus facilement que le type de données était en fait un tableau.
@Mykyuu je serai heureux de connaître la raison.
Vous ne pouvez pas utiliser value.toLowerCase () , car value semble être un tableau et non une chaîne. La valeur doit donc être de type Array pas chaîne et vous devez renvoyer un tableau non console.log.
essayez ceci:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'stringLowerCase'
})
export class LowerCasePipe implements PipeTransform {
transform(value: Array<string>) {
return value.map((x)=>{ return x.toLowerCase() })
}
}
Il existe déjà un tube minuscule ; alors pourquoi s'embêter :-) angular.io/api/common/LowerCasePipe#lowercasepipe
Dans ce lien est utilisé par l'expression not * ngFor
Je veux dire qu'après * ngFor, le résultat est censé être imprimé dans le modèle {{output}} , alors un simple tube fonctionnera bien dans ce cas. créez plutôt un tube et inscrivez-vous dans le module afin de fournir d'autres dépendances
Je sais, mais j'ai répondu à sa question, j'ai résolu ce qu'il essayait de faire.
Vous devez appliquer votre pipe personnalisée comme ci-dessous, cela fonctionnera.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'stringLowerCase'
})
export class LowerCasePipe implements PipeTransform {
transform(value: string) {
console.log(value.toString().toLowerCase());
return value.toLowerCase();
}
}
Et dans votre pipe, retournez après la valeur tranform comme ci-dessous.
<ul>
<li *ngFor="let caption of captions ">
{{caption | stringLowerCase }}
</li>
</ul>
pourquoi ne pas utiliser un tube intégré minuscule :)
oui mais il pourrait faire une opération de chaîne supplémentaire, alors le tube personnalisé est plus utile
<li *ngFor="let caption of captions">
{{caption | lowercase }}
</li>
<li *ngFor="let caption of captions">
{{caption | uppercase }}
</li>
Merci pour toutes vos réponses, j'essaye en fait de créer un composant de table. Et je voulais transformer le col en minuscule, c'est mapper à mon jeu de données, afin de construire des enregistrements. Veuillez trouver le code source mis à jour.
<li *ngFor="let caption of captions">
{{caption | lowercase }}
</li>
Bien que ce code puisse être la solution, en tant que bonne réponse, il a vraiment besoin d'une explication sur les raisons de son fonctionnement.
Pourquoi n'utilisez-vous pas simplement le tuyau prédéfini en angulaire pour les minuscules? Exemple: let légende des légendes | minuscule
@SoujanyaJ je pense que vous devez
{{Abc | minuscules}}cochez cette stackblitz.com / edit /…@ThanveerShah a bien compris, voici le lien, angular.io/api/common/LowerCasePipe#lowercasepipe
@Soujanya - vous devez utiliser un tube prédéfini comme {{option | minuscule}} plutôt que de créer un tube complexe sur un tableau. rendre votre projet simple et plus rapide
Merci pour toutes vos réponses, j'essaye en fait de créer un composant de table. Et je voulais transformer le col en minuscule, c'est mapper à mon jeu de données, afin de construire des enregistrements. Pouvez-vous jeter un œil au code source mis à jour.