生产构建失败。 预期 3 个参数，但得到 2 个

Question

 import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'elipsis' }) export class ElipsisPipe implements PipeTransform { transform(text, length, clamp) { text = text || ''; clamp = clamp || '...'; length = length || 30; if (text.length <= length) return text; let tcText = text.slice(0, length - clamp.length); let last = tcText.length - 1; while (last > 0 && tcText[last] !== ' ' && tcText[last] !== clamp[0]) last -= 1; // Fix for case when text dont have any `space` last = last || length - clamp.length; tcText = tcText.slice(0, last); return tcText + clamp; } }

ng build command resulted in the following error:

ERROR in src/app/components/movies/movies.component.html(15,21): Expected 3 arguments, but got 2. src/app/components/movies/movies.component.html(38,21): Expected 3 arguments, but got 2. src/app/components/movies/movies.component.html(61,21): Expected 3 arguments, but got 2. src/app/components/movies/movies.component.html(83,21): Expected 3 arguments, but got 2.

 <div class="listing"> <div class="listing__head"> <h3 class="listing__title">Popular Movies</h3> <!-- <a class="listing__explore"><strong>Explore All</strong></a> --> </div> <p-carousel [value]="discover_movies_data" [numVisible]="6" [numScroll]="4" [circular]="false"> <ng-template let-discovermovies pTemplate="item"> <div class="listing-item-style" [routerLink]="['/movies/', discovermovies.id]"> <div class="overlay"> <div class="hover"><i class="material-icons">play_arrow</i> PLAY NOW</div> </div> <img *ngIf="discovermovies?.poster_path" src="https://image.tmdb.org/t/p/w370_and_h556_bestv2/{{discovermovies?.poster_path}}"> <img *ngIf="!discovermovies?.poster_path" src="assets/images/default-movie.png"> <h6>{{ discovermovies?.title | elipsis:22 }}</h6> <p class="rate"><i class="material-icons">star</i><span>{{discovermovies?.vote_average}}</span> /10 </p> </div> </ng-template> </p-carousel> </div> <div class="listing"> <div class="listing__head"> <h3 class="listing__title">Upcoming Movies</h3> <!-- <a class="listing__explore"><strong>Explore All</strong></a> --> </div> <p-carousel [value]="upcoming_movies" [numVisible]="6" [numScroll]="4" [circular]="false"> <ng-template let-coming_movies pTemplate="item"> <div class="listing-item-style" [routerLink]="['/movies/', coming_movies.id]"> <div class="overlay"> <div class="hover"><i class="material-icons">play_arrow</i> PLAY NOW</div> </div> <img *ngIf="coming_movies?.poster_path" src="https://image.tmdb.org/t/p/w370_and_h556_bestv2/{{coming_movies?.poster_path}}"> <img *ngIf="!coming_movies?.poster_path" src="assets/images/default-movie.png"> <h6>{{ coming_movies?.title | elipsis : 22 }}</h6> <p class="rate"><i class="material-icons">star</i><span>{{coming_movies?.vote_average}}</span>/10 </p> </div> </ng-template> </p-carousel> </div> <div class="listing"> <div class="listing__head"> <h3 class="listing__title">Top Rated Movies</h3> <!-- <a class="listing__explore"><strong>Explore All</strong></a> --> </div> <p-carousel [value]="top_rated_movies_data" [numVisible]="6" [numScroll]="4" [circular]="false"> <ng-template let-toprated pTemplate="item"> <div class="listing-item-style" [routerLink]="['/movies/', toprated.id]"> <div class="overlay"> <div class="hover"><i class="material-icons">play_arrow</i> PLAY NOW</div> </div> <img *ngIf="toprated?.poster_path" src="https://image.tmdb.org/t/p/w370_and_h556_bestv2/{{toprated?.poster_path}}"> <img *ngIf="!toprated?.poster_path" src="assets/images/default-movie.png"> <h6>{{ toprated?.title | elipsis : 22 }}</h6> <p class="rate"><i class="material-icons">star</i><span>{{toprated?.vote_average}}</span>/10 </p> </div> </ng-template> </p-carousel> </div> <div class="listing"> <div class="listing__head"> <h3 class="listing__title">Now Playing Movies</h3> <!-- <a class="listing__explore"><strong>Explore All</strong></a> --> </div> <p-carousel [value]="now_playing_movies" [numVisible]="6" [numScroll]="4" [circular]="false"> <ng-template let-nowplaying pTemplate="item"> <div class="listing-item-style" [routerLink]="['/movies/', nowplaying.id]"> <div class="overlay"> <div class="hover"><i class="material-icons">play_arrow</i> PLAY NOW</div> </div> <img *ngIf="nowplaying?.poster_path" src="https://image.tmdb.org/t/p/w370_and_h556_bestv2/{{nowplaying?.poster_path}}"> <img *ngIf="!nowplaying?.poster_path" src="https://image.tmdb.org/t/p/w370_and_h556_bestv2/{{nowplaying?.poster_path}}"> <h6>{{ nowplaying?.title | elipsis : 22 }}</h6> <p class="rate"><i class="material-icons">star</i><span>{{nowplaying?.vote_average}}</span>/10 </p> </div> </ng-template> </p-carousel> </div>

Answer 1

OK. Here's the problem:

export class ElipsisPipe implements PipeTransform {

  transform(text, length, clamp) {
    text = text || '';
    clamp = clamp || '...';
    length = length || 30;

EllipsisPipe requires 3 arguments, and TypeScript can't ignore that. Use optional parameters with default values:

  transform(text, length = 30, clamp = '...') {