Search code examples
angularangular-pipe

Why angular 6 is not recognizing a pipe with more than one argument?


First time making a question here, in StackOverflow...

I'm trying to call a pipe that has two arguments.

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

@Pipe({
  name: 'showDateIntervenientValueForDesconhecido'
})
export class ShowDateIntervenientValueForDesconhecidoPipe implements PipeTransform {

  transform(dDataRecibo: string, monthlyYields: string[]): any {
    let i = 0;
    let bothAreNotZero = true;
    let yieldIntervenientValue = "";

    while (i < monthlyYields.length && bothAreNotZero) {
      if (monthlyYields[i]['nTitular'] === "0"
      && monthlyYields[i]['nAvalista'] === "0"
      && monthlyYields[i]['dDataRecibo'] === dDataRecibo) {
        yieldIntervenientValue = monthlyYields[i]['mRendimentoLiquidoMensal'];
        bothAreNotZero = false;
      }
      i++;
    }
  }
}

When I call it with one argument, Angular 6 recognizes the pipe.

<table mat-table [dataSource]="arrayMonthlyYields" id="rendimentosTable"
[hidden]="arrayMonthlyYields.length === 0">
  <ng-container matColumnDef="Desconhecido">
    <th class="text-center" mat-header-cell *matHeaderCellDef>Desconhecido</th>
    <td mat-cell *matCellDef="let dDataRecibo">{{ dDataRecibo | showDateIntervenientValueForDesconhecido }}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="colsForRendimentosPatrimonio"></tr>
  <tr mat-row *matRowDef="let row; columns: colsForRendimentosPatrimonio"></tr>
</table>

But, when I call it with two arguments, Angular does not recognize showDateIntervenientValueForDesconhecido as a pipe.

<table mat-table [dataSource]="arrayMonthlyYields" id="rendimentosTable"
[hidden]="arrayMonthlyYields.length === 0">
  <ng-container matColumnDef="Desconhecido">
    <th class="text-center" mat-header-cell *matHeaderCellDef>Desconhecido</th>
    <td mat-cell *matCellDef="let dDataRecibo">{{ dDataRecibo | showDateIntervenientValueForDesconhecido: monthlyYields }}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="colsForRendimentosPatrimonio"></tr>
  <tr mat-row *matRowDef="let row; columns: colsForRendimentosPatrimonio"></tr>
</table>

And yes, I tried to call it in other code lines, but it didn't work. I also added the pipe to declarations of the app.module.ts . I don't understand what's happening. What I want to do is call that pipe given a string and an array of strings.


Solution

  • The documentation of the pipes helped me discovering the issue. It was a little detail - the return statement inside the pipe method transform was missing. So, the final code is this:

    transform(dDataRecibo: string, monthlyYields: string[]): string {
        let i = 0;
        let bothAreNotZero = true;
        let yieldIntervenientValue = "Sem Rendimento";
    
        while (i < monthlyYields.length && bothAreNotZero) {
          if (monthlyYields[i]['nTitular'] === "0"
          && monthlyYields[i]['nAvalista'] === "0"
          && monthlyYields[i]['dDataRecibo'] === dDataRecibo) {
            yieldIntervenientValue = monthlyYields[i]['mRendimentoLiquidoMensal'];
            bothAreNotZero = false;
          }
          i++;
        }
    
        return yieldIntervenientValue;
    }