使用Ionic2虚拟滚动的数据渲染问题

Question

我正在使用Ionic2虚拟滚动显示分页。在渲染html中的数据时，我们正在遇到问题。

我们能够获取JSON数据，但数据没有渲染。有人可以在这个问题上提供帮助吗？

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({
  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()
   );
}

服务

@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;
          }
          )
      }
}

和我得到的输出是

[{"custRefId":"159025"},{"custRefId":"1525"},{"custRefId":"9025"}]

Answer 1

这根本不像虚拟滚动问题。看看这个github链接，以及本论坛讨论
两者都建议ion-grid不会在ion-item中渲染。

@jgw96在github链接中建议：

与我的队友讨论了这一点后，似乎部分是由 设计，部分是一个无效的角度问题。作为一个 解决此方法，我建议不要使用离子网格，而只使用 CSS进行布局。

建议您使用ion-item，因为您需要ion-list进行虚拟频率，并使用自定义CSS安排项目。

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