Angular Pipe not transforming data correctly with arguments

0
votes

I have a list in my application that's being displayed in a table using *ngFor. This list can have 10, 50, or 100 items displayed on the page at a time. I want the user to be able to control the amount of items displayed in the table, so I created a Pipe directive that passes the value controlled by a dropdown input:

   <select class="form-control" [(ngModel)]="aIndex">
       <option id="10" value="10" selected="selected">10</option>
       <option id="50" value="50">50</option>
       <option id="100" value="100">100</option>
   </select>

  <table>
    <tbody>
      <tr *ngFor="let item of aList | aIndexPipe: 'aIndex'>
        ...
       </tr>
    </tbody>
  </table>

My pipe code looks like:

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

@Pipe({
  name: "aIndexPipe"
})

export class AIndexPipe implements PipeTransform {
  transform(array: Array<any>, arg1:any): Array<string> {

    var newArray =[];
    for(let i=0;i<arg1;i++) {
      newArray.push(array[i]);
    }
    return newArray;
  }
}

The list is always transformed to be empty, no matter what I select. Am I passing the arguments wrong? Do I have to call an update function whenever I pass a new value to the ngModel variable?

1
angular

1 Answers

0
votes

Solved it! Put aIndexPipe: 'aIndex' as aIndexPipe: aIndex, don't follow online tutorials to a T.