带有 ngFor Ionic 3 的 AlertCtrl 消息 html答案

【问题标题】：AlertCtrl message html with ngFor Ionic 3带有 ngFor Ionic 3 的 AlertCtrl 消息 html
【发布时间】：2018-07-13 17:26:44
【问题描述】：

我知道我可以将带有 ``(backticks) 的 html 放入消息中，但我不能将 *ngFor 放入 div 中，它不会呈现项目数组。我该怎么做才能将 *ngFor 放在带有反引号的 div 中。在代码中它将是这样的：

let items = [1,2,3]

let alert = this.alertCtrl.create({
    title: 'Confirm purchase',
    message: `<div *ngFor="let item of items"> {{item}}</div>`,
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      },
      {
        text: 'Buy',
        handler: () => {
          console.log('Buy clicked');
        }
      }
    ]
  });

【问题讨论】：

是的，html 包含适用于纯 html，不适用于 Angular 模板。潜在的解决方法是使用 popOver 或类似组件创建自己的警报

标签： angular ionic-framework ionic2 ionic3

【解决方案1】：

为什么不自己制作html列表：

let itemsList = ``;

items.map((item)=>{
   itemsList += `<li>${item}</li>`
})

let message = `<ul>${itemsList }</ul>`;

let alert = this.alertCtrl.create({
  title: 'Confirm purchase',
  message: message ,
  buttons: [
    {
    text: 'Cancel',
    role: 'cancel',
    handler: () => {
      console.log('Cancel clicked');
    }
  },
  {
    text: 'Buy',
    handler: () => {
      console.log('Buy clicked');
    }
  }
 ]
});

【讨论】：

【解决方案2】：

    let itemsList = ``;
    let imageList = ``;
    let items = [1,2,3];
    let images: any[] = ['../../assets/basic_logo_2.png', '../../assets/basic_logo_3.png', '../../assets/basic_logo_4.png']  
    items.map((item)=>{
      itemsList += `<li>${item}</li>`
      imageList += `<li> <img src ='${images[0]}'  class="alert-img" > </li>`
      });
    let message = `<ul>${itemsList}</ul>`;
    let message1 = `<ul> ${imageList}</ul>`;
    const alert = await this.alertCntrl.create({
      header: 'Title',
      message:  message + message1 + ` <span>message body</span> <div>  <img src="../../assets/basic_logo_2.png" alt="g-maps" class="alert-img" ></div>` ,
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',         
          handler: (blah) => {
            console.log('Confirm Cancel: blah');
          }
        }, {
          text: 'Replay',
          handler: () => {
            console.log('Confirm Okay');
          }
        }
      ]
    });
    await alert.present();
  }

【讨论】：