Listview没有使用Angular在混合移动应用程序中显示数据

时间:2018-05-10 09:01:02

标签: angular ionic-framework

我是使用角度应用程序离子的新手,我正在尝试使用下面的代码显示listview但是我得到例外,如下所示可以有人建议我如何解决这个问题

'arrayList' is declared but its value is never read.
      L9:  export class HomePage {
      L10:    private arrayList:Array<any>=[];
      L11:    constructor(public navCtrl: NavController) { }

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { DetailPage } from '../detail/detail';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  private arrayList:Array<any>=[];
  constructor(public navCtrl: NavController) {
   }

  ionViewDidLoad() {
    this.arrayList = [{name:"Ramakrishna1",email:"rk1@gmail.com",phoneNumber:"8008824731"},
    {name:"Ramakrishna2",email:"rk2@gmail.com",phoneNumber:"8008824731"},
    {name:"Ramakrishna3",email:"rk3@gmail.com",phoneNumber:"8008824731"},
    {name:"Ramakrishna4",email:"rk4@gmail.com",phoneNumber:"8008824731"},
    {name:"Ramakrishna5",email:"rk5@gmail.com",phoneNumber:"8008824731"},
    {name:"Ramakrishna6",email:"rk6@gmail.com",phoneNumber:"8008824731"},
    {name:"Ramakrishna7",email:"rk7@gmail.com",phoneNumber:"8008824731"},
    {name:"Ramakrishna8",email:"rk8@gmail.com",phoneNumber:"8008824731"},
    {name:"Ramakrishna9",email:"rk9@gmail.com",phoneNumber:"8008824731"}];
  }
}

home.html的

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      ListView
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-list>
        <ion-item *ngFor="let list of arrayList" text-wrap>
            <h2>{{list.name}}</h2>
            <p>Email: {{list.email}}, Number: {{list.phoneNumber}}</p>
          <button ion-button clear item-right (click)="goToDetails(list)">View</button>
        </ion-item>
      </ion-list>
</ion-content>

1 个答案:

答案 0 :(得分:0)

变量arrayList是私有的,因此您无法在--prod - 模式的模板中访问它。如果没有在模板中读取,它就被认为是未使用的。

将其变为

arrayList:Array<any>=[];

没有private。默认访问修饰符是公共的,您需要将其公开才能在模板中可读。