Ionic 3中如何在AlertController中使用变量显示消息内容？

嘿，这个问题其实是Angular组件中访问类属性的基础问题，我来给你捋清楚：

你遇到的核心问题是在组件的TypeScript代码中，访问类的属性必须通过this关键字，而且TypeScript里不能直接用Angular模板的{{}}插值语法。

错误原因分析 #

你之前尝试的message: 'Meeting 1 time:' + meetingTimes.meeting1无效，是因为没有加this来访问组件实例的meetingTimes属性；而原代码里的message: 'Meeting 1 time:' {{ meetingTimes.meeting1 }},更是语法错误，TS代码里不支持这种模板插值写法。

正确的两种写法 #

写法1：使用ES6模板字符串（推荐，更简洁易读）

直接用反引号包裹字符串，变量用${}嵌入：

doAlert() {
  let meetingTime = this.alerCtrl.create({
    title: 'Weekly Meeting Times',
    message: `Meeting 1 time: ${this.meetingTimes.meeting1}`,
    buttons: ['Close']
  });
  meetingTime.present();
}

写法2：传统字符串拼接

如果不习惯模板字符串，也可以用+拼接，但一定要加上this：

doAlert() {
  let meetingTime = this.alerCtrl.create({
    title: 'Weekly Meeting Times',
    message: 'Meeting 1 time: ' + this.meetingTimes.meeting1,
    buttons: ['Close']
  });
  meetingTime.present();
}

另外还要检查一下你的alerCtrl是不是已经在组件的构造函数中注入了哦，比如：

constructor(private alerCtrl: AlertController) {}

（如果没注入的话，this.alerCtrl也会报错，这个细节别漏了）

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