Angular 7 Sweet alert 显示动态表 [英] Angular 7 Sweet alert show dynamic table

问题描述

我正在使用带有 Angular 7 的 Sweet alert 2，并且我正在尝试显示动态表.

杰森:

<预><代码>[{"name": "史蒂夫",年龄":23},{"name": "约翰",年龄":30},{"name": "丹尼尔",年龄":18}]

我尝试使用 *ngFor 但不幸的是，它不起作用.

Swal({位置:'中心'，类型:'信息'，title: `班级信息`,html:`<表格><tr><th>姓名</th><th>年龄</th></tr><tr *ngFor="让一个人的人"><td>{{person.name}}</td><td>{{person.age}}</td></tr></table>`,});

替代方案，我正在尝试显示我自己的组件.

 Swal({位置:'中心'，类型:'信息'，标题:`班级信息`，html:`<class-component [inputClassInformation]="classInformationJson"></class-component>`});

这不起作用.

我的目标是显示以下弹出窗口:

解决方案

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

ngx-sweetalert2

<swal title="填写表格，快速"><表格><tr><th>姓名</th><th>年龄</th></tr><tr *ngFor="让一个人的人"><td>{{person.name}}</td><td>{{person.age}}</td></tr></swal>

I'm using Sweet alert 2 with Angular 7, And i'm trying to display dynamic table.

Json:

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

I've tried to use *ngFor but unfortunately,it's not working.

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>`,
});

Alternative i'm trying to display my own component.

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

This is not working as well.

My goal is display the following pop-up :

解决方案

you need to use ngx-sweetalert2 for Angular 7 to show show dynamic table

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>

这篇关于Angular 7 Sweet alert 显示动态表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！