Ionic3/Angular5：如何在HTML模板引用单例Helper类的列表数据？

这个问题其实是Angular模板作用域的典型坑——模板只能直接访问组件类的公共属性，没法直接引用注入的服务（你的Helper单例）的属性，除非你做一些小调整。下面给你两种靠谱的解决方案：

方案一：把Helper实例暴露给模板 #

直接在构造函数里把helper设为public，这样组件模板就能直接访问这个单例实例的属性：

constructor(public navCtrl: NavController, public helper: Helper) { 
  // 不需要额外定义局部变量，只要把helper设为public即可
}

然后在HTML模板里直接使用helper.itemsList（注意不需要加this，模板上下文默认就是组件实例）：

<ion-list *ngFor="let item of helper.itemsList">
  <!-- 这里写你的列表项内容，比如 {{item.name}} -->
</ion-list>

方案二：将单例列表映射为组件属性 #

如果你不想把整个Helper暴露给模板，只想单独暴露itemsList，可以在组件类里定义一个公共属性，指向Helper的列表：

export class YourComponent {
  // 定义组件的公共属性，关联到Helper的列表
  public itemsList: any[];

  constructor(private navCtrl: NavController, private helper: Helper) { 
    // 把单例的列表赋值给组件属性
    this.itemsList = this.helper.itemsList;
  }
}

然后HTML模板里就可以直接用你最初的写法了：

<ion-list *ngFor="let item of itemsList">
  <!-- 列表项内容 -->
</ion-list>

补充说明 #

你之前写的let itemsList = this.helper.itemsList;是构造函数里的局部变量，组件模板根本访问不到，所以lint会提示“未使用”。必须把它定义成组件类的公共属性，模板才能读取到。

如果helper.itemsList是动态更新的（比如后续会添加/删除元素），你可能需要把它改成Observable并在模板里用async管道，或者手动触发变更检测，不过静态数组的话上面两种方法完全够用。

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