Ionic+Angular混合应用ListView不显示数据及警告问题求助

Hey there! Let's get your ListView working and fix that warning—here's what's going on and how to fix it:

核心问题分析 #

你遇到的两个问题（警告+列表不显示）其实是同一个原因：Angular模板无法访问组件类中的私有属性。你把arrayList声明成了private，模板里的*ngFor="let list of arrayList"根本找不到这个变量，所以TypeScript提示它没被读取，同时列表自然渲染不出来。

具体修复步骤 #

1. 把数组属性改为公共（public） #

修改home.ts里的arrayList声明，将private改为public：

export class HomePage {
  // 把private改成public，让模板可以访问
  public 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"}
    ];
  }
}

2. 实现模板中用到的goToDetails方法 #

你的模板里有个(click)="goToDetails(list)"的按钮，但组件类里没有这个方法，点击会报错。在HomePage类里添加这个方法：

goToDetails(list: any) {
  // 跳转到DetailPage，并传递当前列表项的数据
  this.navCtrl.push(DetailPage, { itemData: list });
}

验证修复 #

修改完成后，重新运行你的Ionic项目：

• 那个'arrayList' is declared but its value is never read.的警告会消失
• ListView会正确渲染出你定义的所有数据项
• 点击"View"按钮可以正常跳转到详情页（如果你的DetailPage已经正确配置的话）

内容的提问来源于stack exchange，提问作者AbhiRam