如何用Angular typescript将字符串或语句转换为小写

迪鲁宾
301 阅读3分钟

在本教程中，你将学习如何用Angular typescript将字符串或语句转换为小写。

本指南将教你如何在Angular中使用typescript将一个字符串转换为小写字母。同时，包括一个例子，如何在Angular HTML和typescript组件中使用'Angular LowerCasePipe`。

对于一个字符串来说，小写意味着将所有字母转化为小写。

例如，如果一个字符串被传递

Angular Lowercase Example Tutorial

并输出管道，所有的字符都被转换为小写：

angular lowercase example tutorial


We can achieve this by writing our code or using an existing Angular LowerCasePipe.

Angular core has a pipe called `LowerCasePipe` that converts a string to lower case.
To make lower case pipework in an Angular application, you need to include `CommonModule`.

Angular小写字母管道语法

Angular提供了内置的管道LowerCase ，来自Angular Core的CommonModule 。这个管道接收一个输入字符串，并将其转换为小写字母，然后返回一个字符串作为输出。

语法：

{{expression | lowercase}}

expression：是字符串或类型表达式的小写值。Angular Core的管道

如何在Angular组件中把字符串转换成小写字母

在typescript组件中，变量标题被声明并初始化为一个字符串文本。

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

@Component({
  selector: 'app-lower-case-pipe',
  templateUrl: './lower-case-pipe.component.html',
  styleUrls: ['./lower-case-pipe.component.scss'],

})
export class LowerCasePipeComponent {
    heading="Angular Lowercase Example Tutorial";
  constructor() { 
  }

  }

在Html组件中，lowercase pipe 被用于表达式中。

<div>
    <h2>{{ heading | lowercase }}</h2>
</div>

而在浏览器中看到的输出是

angular lowercase example tutorial

重要的一点。

  • LowerCase Pipe只接受string 和any 类型。
  • 字符串文本可以有英文字母和数字值
  • 逗号、连字符和其他特殊字符在字符串中是允许的。

我们已经在Angular HTML组件中使用了pipe。

这也可以用自定义代码的typescript文件，如下图所示

Angular小写字母在ts组件文件中的例子

本节介绍了如何在typescript代码中直接使用LowerCasePipe ，而不在HTML组件中使用。

你可以使用这个typescript代码。

  • 在A组件中，在构造函数中注入初始化LowerCasePipe 实例
  • 通过调用ngOnInit 中的transform 方法或点击按钮将字符串转换为小写字母。
import { Component, OnInit } from '@angular/core';
import { LowercasePipe } from '@angular/common';

@Component({
  selector: 'app-lower-case-pipe',
  templateUrl: './lower-case-pipe.component.html',
  styleUrls: ['./lower-case-pipe.component.scss'],
    providers: [LowercasePipe]

})
export class LowerCasePipeComponent implements OnInit {
    heading="Angular Lowercase Example Tutorial";
    content = " Transform Content to Smallcase";
    constructor(private lowerCasePipe: LowercasePipe) { 
      this.content=this.lowerCasePipe.transform(this.content);
  }
  }

  ngOnInit(): void {
  }
}

在html模板组件中，你可以打印

<div>
    <h2>{{ content }}</h2>
</div>

angular lower pipe with an error not working

当你在Angular组件中使用LowerCasePipe ，以下是你经常遇到的错误。

一个错误，错误。InvalidPipeArgument: '' for pipe 'LowerCasePipe' 。

在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。没有LowerCasePipe的提供者!

Providers 为了解决这个错误，你必须在组件中添加LowerCasePipe ，如下图所示。

import { LowerCasePipe } from '@angular/common';

@Component({
    selector: '',
    templateUrl: '',
    providers: [LowerCasePipe]
})

第三个错误，TS2769。没有与此调用相匹配的重载。

当你使用小写字母转换数字变量时，这个错误重现了。

src/app/lower-case-pipe/lower-case-pipe.component.html:4:7 - error TS2769:没有与此调用相匹配的重载。3的重载1，'(value: string): string'，给出了以下错误。类型为'number'的参数不能赋值给类型为'string'的参数。3的重载2，'(value: null | undefined): null'，给出了以下错误。类型为'number'的参数不能被分配给类型为'null | undefined'的参数。3的重载3，'(value: string | null | undefined): string | null'，给出了以下错误。类型为'number'的参数不能分配给类型为'string | null | undefined'的参数。

在 typescript Component 中，你声明

  salary = 1123;

在Html中，你用的是通过传递一个小写管道的字符串变量就可以解决这个问题。

   {{salary|lowercase}}

总结

在这篇文章中，我们已经学到了以下内容。

  • Angular小写字母管道组件的例子
  • 在Typescript ts文件中的小写字母例子
  • 修复Angular小写字母管道不工作的错误
avatar
文章
阅读
粉丝