如何在 AlertController - Ionic 3 中使用变量显示消息正文？答案

【问题标题】：How to show message body using variable in AlertController - Ionic 3?如何在 AlertController - Ionic 3 中使用变量显示消息正文？
【发布时间】：2019-07-03 05:30:49
【问题描述】：

我有以下代码：

home.html

<button (click)="doAlert()" color="primary" ion-button small round>
    <div><span float-right> {{ meetingTimes.meeting1 }} </span></div>
</button>

home.ts

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

在home.html 中，{{ meetingTimes.meeting1 }} 可以正常工作，但是单击时如何在 doAlert 方法中显示/使用相同的值？

我知道我不能在组件中使用这个{{ meetingTimes.meeting1 }}，但是正确的方法是什么？

我尝试过：message: 'Meeting 1 time:' + meetingTimes.meeting1,，但没有成功。

【问题讨论】：

尝试使用消息：'Meeting 1 time:' + this.meetingTimes.meeting1
非常感谢！我需要为不同的会议多次展示。因此，是否有另一种方法可以做到这一点，以便可以从另一个页面加载消息正文，也许我可以在其中添加 CSS 以清楚地表示消息？再次感谢您。

标签： angular ionic3

【解决方案1】：

试试这个。

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

工作demo。

【讨论】：

谢谢，这个解决方案也有效。是否有另一种方法可以做到这一点，以便可以从另一个页面加载消息正文，也许我可以在其中添加 CSS 以更清楚地表示警报中的消息？
不，AlertContoller 是不可能的。如果你需要它，你必须ModalController

【解决方案2】：

您可以使用ModalContoller 完成此操作。您可以从home.html 打开另一个页面作为模式对话框。让我们得到那个页面是modal.html。

modal.html

<div id="container">
  <ion-content padding>
    <p class="message">{{message}}</p>
    <button ion-button color="danger" (click)="close()">OK</button>
  </ion-content>
</div>

modal.scss

#container {
  margin: 100px 50px;
  height: 120px;
  box-shadow: -3px -4px 12px 6px rgba(0, 0, 0, 0.4);
}

button {
  float: right;
  margin-bottom: 20px;
}

.message {
  color: red;
  font-weight: bold;
}

ModalPage.ts

export class ModalPage {

  message: string;

  constructor(
    private viewCtrl: ViewController, 
    private navParams: NavParams) {

    this.message = this.navParams.get('message');

  }
  close() {
    this.viewCtrl.dismiss();
  }
}

现在您可以从 home.html 中将 modal.html 作为对话框打开，如下所示。

export class HomePage {

  constructor(private modalCtrl: ModalController) {}

  doAlert()() {
    let myModal = this.modalCtrl.create(ModalPage, { message: `Meeting 1 time: ${this.meetingTimes.meeting1}`});
    myModal.present();
  }
}

我认为这会对您有所帮助。查找工作演示HERE

【讨论】：

您的示例和演示链接非常有帮助。但是，当打开模式时，我收到一条错误消息 Cannot read property 'meeting1' of undefined 但 {{meetingTimes.meeting1}} 在 home.html 页面中可以正常工作。
您需要将其正确传递给模态。如果您可以像我的演示一样在 stackblitz 中重现您的问题。我可以给你解决方案。但我认为你得到了正确的答案。因此将此标记为正确答案。如果您可以将Cannot read property 'meeting1' of undefined but {{meetingTimes.meeting1}} 作为一个单独的问题提出，那就更好了，因为这不是您从问题中提出的。