Ionic中AlertCtrl提示框变量显示问题

嘿，这个坑我之前踩过！AlertController的message属性是直接渲染纯HTML/文本的，它不支持解析Angular的模板语法，所以你写的{{dollarPerLitre}}只会被当成普通字符串输出，不会替换成变量值。

正确的做法：用JS变量插值代替Angular模板语法 #

你已经用到了ES6的模板字符串（反引号`），只需要把{{变量名}}改成${变量名}就能直接嵌入变量值了。另外注意你代码里的小错误：<liDate:应该是<li>Date:，不然HTML会渲染异常。

修正后的完整代码如下：

let confirm = this.alertCtrl.create({
  title: 'Are you sure?',
  message: `
    Are these details correct?
    <ul>
      <li>Price ($/L): ${this.dollarPerLitre}</li>
      <li>KMs Done: ${this.kmsDone}</li>
      <li>Total Spent: ${this.totalSpent}</li>
      <li>Fuel Type: ${this.fuelType}</li>
      <li>Date: ${this.date}</li>
    </ul>
  `,
  buttons: [
    {
      text: 'No',
      handler: () => {
        console.log('Disagree clicked');
      }
    },
    {
      text: 'Yes',
      handler: () => {
        console.log('Agree clicked');
      }
    }
  ]
});
confirm.present();

补充说明 #

• 如果你的项目还在使用ES5语法，就用传统的字符串拼接方式："Price ($/L): " + this.dollarPerLitre
• 确保在创建Alert的时候，这些变量已经被赋值了，不然会显示undefined

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