使用ionic2 Virtual Scroll进行数据渲染问题

Question

我正在使用ionic2 Virtual Scroll来显示分页。我们在用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

这看起来根本不像虚拟滚动问题。 请查看this Github link和this forum discussion 两项建议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>