如何反转 html 模板中插值中存在的字符串

Question

例如，我在标题键中有一个字符串作为 Sebamed Baby Wash Extra Soft 400Ml 我想将其反转为 "Sebamed ybab Wash artxE Soft lM004"。如何反转它是否有任何 angular 管道喜欢反转字符串。我在模板的卡片中提到了;ate as reverse title 来显示反转的字符串。

    <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"

Answer 1

自己制作烟斗：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'reverse'})
export class ReversePipe implements PipeTransform {
    transform(value: string): string {
        return value.split('').reverse().join('');
    }
}

像往常一样声明/导入它，让它撕裂：

<h5 class="card-title">Reverse Name: {{item1.Title | reverse}}</h5>

Answer 2

什么 bryan60 很好，但要格外小心，我会添加对 null/undefined 值的检查，以免出现异常。

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('') : "";
    }
}

这对您来说可能完全没有必要，但认为仍然值得添加。

Answer 3

如果您需要在 Angular 框架中重用此功能，那么创建一个管道来反转文本可能是更好的做法。

但是，如果反转文本功能不是您需要在整个代码中使用的功能，那么使用简单的 CSS class 反转文本方向可能会更简单。 =11=]

<style>
    .reverse{
        direction: rtl;
        unicode-bidi: bidi-override;
        text-align: left;
    }
</style>

<span class='reverse'>!$r@C llA gnillaC¡</span>

这将显示为：¡Calling All C@r$!

如何反转 html 模板中插值中存在的字符串

How to reverse the string present in a interpolation in a html template

angular

html-templates