Par exemple, j'ai une chaîne dans la clé de titre comme Sebamed Baby Wash Extra Soft 400Ml je veux l'inverser en "Sebamed ybab Wash artxE Soft lM004". Comment l'inverser est-il un tuyau angulaire comme pour inverser la corde. J'ai mentionné dans la carte du modèle; mangé comme titre inversé pour afficher la chaîne inversée.
<html component>
<div class="card bg-light mb-3" style="max-width: 640px;" *ngFor="let
item1 of myResponse">
<div class="card-header">Product Info</div>
<div class="row no-gutters">
<div class="col-md-4">
<img src="{{item1.Images}}" class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Product Name: {{item1.Title}}</h5>
<h5 class="card-title">Reverse Name: {{item1.Title}}</h5>
<p class="card-text">Category: {{item1.Category}}</p>
<p class="card-text">ASIN: {{item1.ASIN}}</p>
<p class="card-text">Details: {{item1.Details}}</p>
</div>
</div>
</div>
<br>
<a [routerLink]="['/list']" class="btn btn-dark inline-block">Go
Back</a>
</div>
/>
</ component.ts
import { Component, OnInit } from '@angular/core';
/*importing services*/
import { DealsService } from '../deals.service'
@Component({
selector: 'app-details',
templateUrl: './details.component.html',
styleUrls: ['./details.component.css']
})
export class DetailsComponent implements OnInit {
public myResponse;
constructor(public dealsHttpService : DealsService) {
console.log('Details component constructor is called');
}
ngOnInit() {
console.log('Details component onInit called');
this.myResponse = JSON.parse(localStorage.getItem('details'));
console.log(this.myResponse)
return this.myResponse;
}
}
/>
</localstorage json data
ASIN: "B00VFJWGCA"
Actual Discount: "22.0%"
After_Price: "721"
BeforePrice: "920"
Category: "Baby Grooming"
Deal Check: "Deal"
Details: "['Made in Germany', 'Squalene supports the lipid barrier of
babies and children', 'Sugar based mild cleanser, botanical lipids similar
to vernix, allantoin', 'Instructions Included']"
Discount % Threshold: "15%"
Images: "https://images-eu.ssl-images-amazon.com/images/I/41X6IolhHGL.jpg
|| https://images-eu.ssl-images-amazon.com/images/I/51Gqjo%2B7zgL.jpg"
Rank: "1.0"
Title: "Sebamed Baby Wash Extra Soft 400Ml"
3 Réponses :
créez simplement votre propre pipe:
<h5 class="card-title">Reverse Name: {{item1.Title | reverse}}</h5>
déclarez / importez-le comme d'habitude, et laissez-le déchirer:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'reverse'})
export class ReversePipe implements PipeTransform {
transform(value: string): string {
return value.split('').reverse().join('');
}
}
Salut @ bryan60 dois-je inclure le tube dans le composant de script types ou dois-je créer un fichier séparé pour le fichier
La meilleure pratique consiste à créer des fichiers séparés pour les tuyaux. Conservez-les dans un dossier pipes sous un module partagé quelconque.
Avons-nous besoin de l'inclure à l'aide de l'instruction d'importation dans le fichier dactylographié pour l'utiliser sur un modèle html?
Je pense que je devrais l'inclure dans app.module.ts
Il doit être déclaré ou importé dans le module où il est utilisé
Signifie que le composant de script de type du modèle html n'est-ce pas?
J'ai une autre question ne pouvait pas la résoudre comme lorsque j'inclus cette ligne dans le modèle html "
Détails: {{item1.Details}}
" le résultat apparaît comme suit sur le browser "[" Made in Germany "," Squalene soutient la barrière lipidique des bébés et des enfants "," Nettoyant doux à base de sucre, lipides botaniques similaires au vernix, allantoïne "," Instructions incluses "]" Dois-je créer une autre pipe pour l'afficher sous forme de chaînes?Non, vous devez parcourir votre tableau dans le modèle ou mapper votre tableau à une chaîne de votre composant. Il y a beaucoup de lecture sur l'importation / la déclaration de tuyaux et de directives
Ce que bryan60 est assez bon, mais pour être très prudent, j'ajouterais vérifier les valeurs nulles / non définies afin de ne pas obtenir d'exceptions.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'reverse'})
export class ReversePipe implements PipeTransform {
transform(value: string | null | undefined): string {
return value ? value.split('').reverse().join('') : "";
}
}
Cela pourrait être totalement inutile pour vous , mais j'ai pensé que cela valait toujours la peine de l'ajouter.
la gestion des erreurs est toujours une bonne idée, mais ce n'est pas entièrement vérifié, car un utilisateur peut transmettre n'importe quoi et le compilateur ne l'attrapera pas. Mais cela dépend si vous voulez une erreur "forte" ou silencieuse plus que toute autre chose. Il y a de fortes chances que OP souhaite que des erreurs soient générées si de mauvaises entrées sont insérées.
nit: L'utilisation de !! dans un conditionnel n'est pas pertinente :)
@ developer033 en effet, ce n'est pas nécessaire ici. Merci 👍
Si vous avez besoin de réutiliser cette fonctionnalité dans le framework Angular, créer un tube pour inverser le texte est probablement la meilleure solution.
Cependant, si la fonctionnalité de texte inversé n'est pas quelque chose que vous devez utiliser dans tout votre code, il peut être plus simple de simplement inverser le sens du texte avec une simple classe CSS.
<style>
.reverse{
direction: rtl;
unicode-bidi: bidi-override;
text-align: left;
}
</style>
<span class='reverse'>!$r@C llA gnillaC¡</span>
Merci pour votre suggestion, je vais l'essayer.
Je l'ai vérifié sur ma machine locale avant de le publier.