angular - 带有 ngFor Ionic 3 的 AlertCtrl 消息 html

Question

我知道我可以将带有 ``(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');
        }
      }
    ]
  });

标签： angularionic-frameworkionic2ionic3

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