1

例如,我在标题键中有一个字符串为 Sebamed Baby Wash Extra Soft 400Ml,我想将其反转为“Sebamed ybab Wash artxE Soft lM004”。如何反转它是否有任何像反转字符串的角管。我在模板的卡片中提到过作为反向标题来显示反向字符串。

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

3 回答 3

3

只需制作自己的管道:

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>
于 2019-07-26T20:40:24.687 回答
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('') : "";
    }
}

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

于 2019-07-26T20:59:47.770 回答
0

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

但是,如果您不需要在整个代码中使用反转文本功能,则使用简单的 CSS 类反转文本方向可能会更简单。

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

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

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

于 2019-09-22T22:14:40.713 回答