Кто-нибудь знает, как использовать titlecase в файле component.ts вместо этого в html файле?

Question

Я попробовал следующий код, но он не работает.

import { Component } from '@angular/core';
import { TitleCasePipe } from '@angular/common';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  title = 'Working with Pipe';
  testValue = this.titleCasePipe.transform('firstletter should be upper case.');


  constructor(
    public titleCasePipe: TitleCasePipe
  ){}

}

введите описание изображения здесь

Answer 1

Без трубы

---

Вот ваше простое решение с TitleCase

, которое вы можете использовать напрямую, как это, вам не нужно вводить дополнительный код angular, уже дайте это Характеристики

HTML

<p>
  {{name | titlecase}} <!-- this is titlecase by default -->
</p>

TS

name = 'Working with Pipe';

---

С трубой

Вы можете проверить в input поле также, как это

HTML

<input type="text" id="firstName" name="name" 
[ngModel]="name | titleCase" 
(ngModelChange)="name=$event" 
#firstName="ngModel">

TS

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

@Pipe({name: 'titleCase'})
export class TitleCasePipe implements PipeTransform {
    public transform(input:string): string{
        console.log(input);
        if (!input) {
            return '';
        } else {
            return input.replace(/\b\w/g, first => first.toLocaleUpperCase()) 
        }
    } 
}

и не забудьте добавить declaration вот так

declarations: [ TitleCasePipe ],

Вот мой стек Blitz вы можете проверить здесь

Answer 2

Поместите свой код в конструктор, как это,

 testValue: string;


 constructor(
    public titleCasePipe: TitleCasePipe
 ){
    this.testValue = this.titleCasePipe.transform('firstletter should be upper case.');
 }

Answer 3

Вы можете просто создать объект, иначе добавьте провайдеров, как @ Gérôms скажет

  title = 'Working with Pipe';
  titleCasePipe=new TitleCasePipe()
  testValue = this.titleCasePipe.transform('firstletter should be upper case.');

  constructor(){
  }

Answer 4

Добавьте TitleCasePipe в массив метаданных вашего компонента провайдеров:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
providers: [TitleCasePipe]
})

Пример Stackblitz