带有ngFor Ionic 3的AlertCtrl消息HTML

Question

我知道我可以在消息中放入带有``（反引号）的html，但是我不能在div内放入* ngFor，它不会渲染项目数组。我该怎么做才能将* 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');
        }
      }
    ]
  });

Answer 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');
    }
  }
 ]
});

Answer 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();
  }