在本教程中，你将学习如何用Angular typescript将字符串或语句转换成大写字母。
还有，如何在Angular HTML和typescript组件中使用UpperCasePipe 为例。
字符串的大写字母是指将所有字母转换成大写字母。
我们可以使用自己编写的代码来实现转换，或者使用现有的Angular UpperCasePipe。
Angular核心提供了管道UpperCasePipe ，可以将字符串转换为大写字母。
在Angular应用程序中，为了使UpperCase管道工作，你必须包括CommonModule 。
这个管道接收一个字符串的输入，并返回一个字符串的输出。
例如，如果一个字符串被传递。
angular uppercase example tutorial
和输出管道，所有字符都被转换为大写字母。
ANGULAR UPPERCASE EXAMPLE TUTORIAL
Angular大写字母管道的语法
这个管道接受字符串输入，对其进行转换，并输出大写字母的数据。Angular在CommonModule ，提供了内置的管道UpperCase 。
语法
{{string_expression | uppercase}}
string_expression: 是字符串或typescript表达式的大写值。它是Angular提供的一个内置管道。
如何在Angular组件中使字符串大写
在typescript组件中，变量标题被声明并初始化为一个字符串文本。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
heading="angular upper example tutorial";
}
在Html组件中，uppercase pipe 在表达式中使用。
<div>
<h2>{{ heading | uppercase }}</h2>
</div>
而在浏览器中看到的输出是
Upper Case Pipe Example!
ANGULAR UPPERCASE EXAMPLE TUTORIAL
TEST CONTENT
重要的一点。
- 大写字母管只接受字符串类型的输入。
- 字符串可以包含字母和数字值
- 逗号、连字符和其他特殊字符在字符串中是允许的。
我们在Angular HTML组件中使用了pipe。
它使用了一个带有自定义代码的typescript文件，如下图所示。
Angular大写字母在typescript组件文件中的例子
有时，我们需要在typescript代码中直接使用UpperCasePipe ，而不在HTML组件中使用。
你可以使用这个typescript代码。
- 在A组件中，Inject初始化
UpperCasePipe实例 - 通过调用
ngOnInit中的transform方法或点击按钮将字符串转换为大写字母。
import { UpperCasePipe } from '@angular/common';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-upper-case-pipe',
templateUrl: './upper-case-pipe.component.html',
styleUrls: ['./upper-case-pipe.component.scss'],
providers: [UpperCasePipe]
})
export class UpperCasePipeComponent implements OnInit {
constructor(private uppercasePipe: UpperCasePipe) { }
heading = "angular-uppercase example tutorial";
content = " test content";
ngOnInit(): void {
this.content = this.uppercasePipe.transform(this.content);
}
}
在HTML模板组件中，你可以打印
<div>
<h2>{{ content }}</h2>
</div>
angular大写字母管道不工作
当你在Angular组件中使用UpperCasePipe ，以下是你经常遇到的错误。
一个错误，Error: InvalidPipeArgument: '' for pipe ‘UpperCasePipe’
在app.module.ts中导入CommonModule ，如下图所示
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
CommonModule,
BrowserModule,
AppRoutingModule
],
providers: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
另一个错误NullInjectorError: No provider for UpperCasePipe!
Providers 为了解决这个错误，你必须在组件中添加UpperCasePipe ，如下图所示。
import { UpperCasePipe } from '@angular/common';
@Component({
selector: '',
templateUrl: '',
providers: [UpperCasePipe]
})
第三个Error, TS2769: No overload matches this call.
这个错误在你使用大写字母转换数字变量时再现。
src/app/upper-case-pipe/upper-case-pipe.component.html:4:7 - error TS2769: No overload matches this call. Overload 1 of 3, ‘(value: string): string’, gave the following error. The argument of type ‘number’ is not assignable to the parameter of type ‘string’. Overload 2 of 3, ‘(value: null | undefined): null’, gave the following error. The argument of type ‘number’ is not assignable to the parameter of type ‘null | undefined’. Overload 3 of 3, ‘(value: string | null | undefined): string | null’, gave the following error. The argument of type ‘number’ is not assignable to the parameter of type ‘string | null | undefined’.
在 typescript Component 中，你声明
salary = 1123;
在Html中，你使用了
{{salary|uppercase}}
这个管道只接受字符串和任何类型
第四个错误，error NG8004: No pipe found with name ‘lowercase’.
这个错误是由应用模块中的错误配置引起的。
还有，请导入包含这个管道的模块。所以，大写字母是在CommonModule中声明的。
请在app.module.ts中导入CommonModule 。
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
@NgModule({
declarations: [
],
imports: [
CommonModule,
],
providers: [],
bootstrap: []
})
export class AppModule { }
总结
在这篇文章中，我们已经学到了以下内容
- Angular大写字母管道组件的例子
- Typecript中的uppercasePie例子。
- Angular大写字母不工作，出现错误
