Problem: Pipe transform with select options firing twice


#1

I am trying to use *ngFor to load in that have values that are converted from a json request. I am using the following pipe to convert my json request data to an array in order to use *ngFor.

//used for converting json object to array
@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
        let keys = [];
        for (let key in value) {
          keys.push({key: key, value: value[key]});
        }
        console.log(keys);
        return keys;

  }
}

Here is my select box.

      <ion-select [(ngModel)]="urges">
          <ion-option *ngFor="let urge of urges | keys" ngValue="{{urge['value']['name']}}">{{urge['value']['name']}}</ion-option>
      </ion-select>

The problem is when I click on the select box, and then click ‘Ok’ after selecting an item , the pipe fires again on the item, creating an array of characters. Then my data array seems to get lost.

Any ideas? Thank you!