網頁

2020/1/1

Angular 使用UpperCasePipe及LowerCasePipe轉插值為大小寫

在Angular template使用插值符{{...}}顯示component屬性內容時,可利用UpperCasePipe轉大寫,LowerCasePipe轉小寫。

例如helloworld = 'Hello World'是定義在component的屬性。

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'demo';
  helloworld = 'Hello World'; // <--
}

在template分別使用UpperCasePipeLowerCasePipe轉插值為大小寫。

app.component.html

<p>{{ helloworld }}</p>
<p>{{ helloworld | uppercase }}</p>
<p>{{ helloworld | lowercase }}</p>

顯示效果如下:




參考:

沒有留言:

張貼留言