Data rendering issues using ionic2 Virtual Scroll

I am using the ionic2 Virtual Scroll for showing pagination. we are getting the issues while rendering the data in HTML.
we are able to fetch the JSON data but data not rendering. could any one help on this issue?

HTML


<ion-list class="listview" [virtualScroll]="txndata">   
  <ion-item *virtualItem="let txn">         
    <ion-grid>                
      <ion-row>
        <ion-col width-33>
          <strong>Txn Id:</strong>
        </ion-col>
        <ion-col width-75>
          {{txn.custRefId}}
        </ion-col>
      </ion-row>
    </ion-grid>   
  </ion-item>
</ion-list>

component

@Component({
  selector: 'transactions',
  templateUrl: 'transactions.html'   
})

export class TransactionsPage {
  public txndata: Array<any> = [];
  public txndataarray: any = [];
  constructor(){
    this.getAllTransactionDetails();
  }

  public getAllTransactionDetails(){
    this.commonServices.getTransactionDetails()    
     .subscribe(
       data => {    
         this.txndataarray = data.content;
         for(let txndataObj of this.txndataarray) {            
            this.txndata.push(txndataObj);         
          }     
       },
       err => {    
       },
       () => console.log()
   );
}

Service

@Injectable()
export class CommonServices {
  constructor(){

  }
   getTransactionDetails() {
        let url = '/gettxnmasterdetails';
        return this.getMethod(url);
      }

      getMethod(url: any){        
        return this.http.get(url,"some headers").map(
          result => {
            let data = result.json();
            return data;
          }
          )
      }
}

and output i am getting is,
[{“custRefId”:“159025”},{“custRefId”:“1525”},{“custRefId”:“9025”}]