webentwicklung-frage-antwort-db.com.de

Wie benutzt man Pipe in ts nicht HTML?

Ich füge Text von HTML in HTML-Element

so was

this.legend.append('text')
  .attr('x', legendRectSize + legendSpacing)
  .attr('y', legendRectSize - legendSpacing)
  .text(function(d) { return d; });

dadurch wird HTML erstellt 

<text>Data will come here</text>

Ich möchte Pipe verwenden, um diese Daten in eine Form Umzuwandeln. Wie kann ich das aus ts-Code machen?

und da ich diesen HTML-Code dynamisch erstelle, kann ich Pipe nicht so verwenden 

<text>{{Data will come here | pipename}} </text>

Ich suche nach etwas wie 

this.legend.append('text')
  .attr('x', legendRectSize + legendSpacing)
  .attr('y', legendRectSize - legendSpacing)
  .text(function(d) { return d; }).applypipe('pipename');
javascriptangularpipe
8
Arun Tyagi

Importieren Sie zuerst Ihre Pipe in der Komponente. Und dann verwenden Sie Ihre Pfeife in Ihrer Komponente. So was..

pipe.ts 

/**
 * filter checkbox list
 */
@Pipe({ name: 'filter', pure: true })
export class FilterPipe{
  transform(items: any[], args: any): any {
    let filter = args.toString();
    if(filter !== undefined && filter.length !== null){
        if(filter.length === 0 || items.length ===0){
            return items;
        }else{
            return filter ? items.filter(item=> item.title.toLocaleLowerCase().indexOf(filter) != -1) : items;
        }
    }
  }
}

component.ts (Verwendung in Ihrem TypeScript-Code)

filterPipe = new FilterPipe();
fiteredArr = filterPipe.transform(chkArray,txtSearch);

xyz.html (In Ihrer HTML-Datei verwenden)

<ul>
    <li *ngFor="todo for todos | filter:'txtsearch'"> {{todo.name}} </li>
</ul>
12
Bharat Chauhan

Wenn Pipename Ihre benutzerdefinierte Pipe ist, können Sie den folgenden Code verwenden, wenn Sie dasselbe in Ihrer TS-Datei verwenden möchten

import {Pipename} from './pipename';

Pipename.prototype.transform(arguments);//this is how u can use your custom pipe
8
sudheer KB

In deinen .ts

import {YourPipe} from '/pipePath';


let value = new YourPipe().transform(param);
1
Zoha Irshad

Rohrleitung in die Komponente importieren 

import { PipeName } from './pipename'

füge es in die Angebote ein  

@Component({
    selector: 'pipe-using-component',
    templateUrl: './pipe-using-component.html',
    providers: [
        PipeName
    ],
})

injiziere es im Konstruktor 

export class PipeUsingComponent {
  constructor(private pipeName: PipeName)
   }

   var requiredResult = this.pipeName.transform(passvalue);
}
1
R.C.VISHNU Vardhan