1

Tengo un problema y es que quiero limitar la cantidad de letras que representa una propiedad de un objeto usando limitTo, me sale un error

Error: Uncaught (in promise): Error: Template parse errors: The pipe 'limitTo' could not be found ("click)="openCart()">

{{ [ERROR ->]producto.description | limitTo: 50 }}

Html

<p class=" description">{{ producto.description | limitTo: 50 }}</p>

js

productos.description ="Product Description este 
      es mi texto describiendo las caracteristicas completas del 
      articulo, tales como: peso, tamaño, color, etc.";

Ver documentacion -> https://docs.angularjs.org/api/ng/filter/limitTo

3
  • Buenas, esto es angular 2? en caso de ser así, me parece que ya no existe ese pipe en esta versión.
    – KN_
    Commented el 23 jun. 2017 a las 17:49
  • contesta eso en la pregunta mas esta respuesta: miPipes.ts: import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'miLimitTo' }) export class LimitTo implements PipeTransform { transform(value: string, limite: string, desde: string): string { let hasta = parseFloat(limite); let inicio; let suspencivos=""; if (parseFloat(desde)>0) { inicio = parseFloat(desde); // code... } else{ inicio = 0; } if(value.length > hasta){ Commented el 24 jun. 2017 a las 14:58
  • suspencivos = "... "; } return value.substring(inicio, hasta)+suspencivos; } } app.module.ts: import { LimitTo } from '../pipes/miPipes' declarations: [ LimitTo ], entryComponents: [ LimitTo ] en el Html: {{ expresión | miLimitTo: cantidad }} o {{ expresión | miLimitTo: cantidad : posicionInicio }} Commented el 24 jun. 2017 a las 15:02

1 respuesta 1

2

Hago esta respuesta basada en tu comentario:

En angular 2, el filtro Pipe ya no existe, por lo cual, se necesita una custom Pipe (espero no te moleste, le hice unos cambios a tu código):

miPipes.ts:

import { Pipe, PipeTransform } from '@angular/core'; 
@Pipe({ name: 'miLimitTo' }) 

export class LimitToPipe implements PipeTransform {
  transform(value: string, limite: number, desde: number = 0): string { 
      return (value.length > limite)? value.substring(desde, limite) + '...': value.substring(desde, limite); 
  } 
} 

app.module.ts:

...
import { LimitToPipe } from '../pipes/miPipes'
...
@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, LimitToPipe ],
  bootstrap: [ App ],
  providers: [],
  exports: [LimitToPipe]
})

Html:

<h2>{{name | miLimitTo:100:10}}</h2>
<h2>{{name | miLimitTo:100}}</h2>

Ejemplo funcional en Plunkr: http://plnkr.co/edit/cinehfjc3f5opvjNK8zC?p=preview

Muchas gracias @DanielEnriqueRodriguezCaste

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.