javascript - Angular 7 Sweet Alert显示动态表格

标签 javascript angular sweetalert sweetalert2

我正在将 Sweet Alert 2 与 Angular 7 一起使用,并且我正在尝试显示动态表格。

Json:

[
  {
    "name": "Steve",
    "age": 23
  },
  {
    "name": "John",
    "age": 30
  },
  {
    "name": "Daniel",
    "age": 18
  }
]

我尝试使用 *ngFor 但不幸的是,它不起作用。

Swal({
  position: 'center',
  type: 'info',
  title: `Class Information`,
  html: `<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr *ngFor="let person of persons">
    <td>{{person.name}}</td>
    <td>{{person.age}}</td>
  </tr>
</table>`,
});

我正在尝试显示我自己的组件。

  Swal({
      position: 'center',
      type: 'info',
      title: `Class Information`,
      html: `<class-component [inputClassInformation]="classInformationJson"></class-component>`
    });

这不太有效。

我的目标是显示以下弹出窗口: enter image description here

最佳答案

您需要使用 ngx-sweetalert2 for Angular 7 来显示动态表格

ngx-sweetalert2

<swal title="Fill the form, rapidly">
  <table>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
    <tr *ngFor="let person of persons">
      <td>{{person.name}}</td>
      <td>{{person.age}}</td>
    </tr>
  </table>
</swal>

关于javascript - Angular 7 Sweet Alert显示动态表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55139651/

相关文章:

javascript - 为什么 Jquery 在 Ajax 更新后无法触发事件

angular - 为 Angular 4 中的所有组件注入(inject)服务作为单例

angular - 是否可以对不同元素使用相同的模板引用变量?

javascript - 即使出现错误也会显示 Sweetalert 成功消息

javascript - 在 Sweet alert 2 中传递 PHP 变量

javascript - 如何使用 Sweet Alert 来确认 dropify.js 的图像删除?

javascript - 什么取代了 "with"?

javascript - 我无法让按钮向新创建的 <li> 元素添加一个类

javascript - 如何使用 javascript 和 html 创建搜索栏

javascript - CORS 错误 : “requests are only supported for protocol schemes: http…” etc