标签: ng2-smart-table

模块'AppModule'声明的意外模块'Ng2SmartTableModule'

我正试图从这个链接学习ng2智能表,我收到了这个错误.

未捕获错误:模块'AppModule'声明的意外模块'Ng2SmartTableModule'.请添加@ Pipe/@ Directive/@ Component注释.

这是app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  //templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  //template: `<ng2-smart-table [settings]="settings"></ng2-smart-table>`
})
export class AppComponent {
  //title = 'app';
  settings = {
    columns: {
      id: {
        title: 'ID'
      },
      name: {
        title: 'Full Name'
      },
      username: {
        title: 'User Name'
      },
      email: {
        title: 'Email'
      }
    }
  };
}
Run Code Online (Sandbox Code Playgroud)

和app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Ng2SmartTableModule } from …
Run Code Online (Sandbox Code Playgroud)

components ng2-smart-table angular

3
推荐指数
1
解决办法
1364
查看次数

ng2-smart-table:如何使用CSS?

任何人都可以帮助我如何将CSS用于ng2-smart-table compoment?

我喜欢自定义分页,标题,主题,正文

在此先感谢Andrea

css ng2-smart-table angular

3
推荐指数
1
解决办法
1790
查看次数

在 DataTable Angular 中对格式化日期进行排序

我有我的 API 并且我使用它来获取它HTTP GET我用我的模型投射我的信息Alert taht 包含一个Date类型时间戳,如果我使用 Date 类型运行 DataTable 我可以对列进行排序,但这里的问题是我得到的格式如下格式

2018 年 9 月 3 日星期一 01:56:36 GMT-0700(太平洋夏令时间(墨西哥))

当我尝试使用格式化的日期时,09/03/2018 01:56:36如果我使用这种格式运行数据表,则排序不起作用,因为它排序为字符串而不是日期

我的问题是:如何将日期类型格式化为MM/DD/YYYY hh:mm:ss??

注意:我使用ng2-smart-table作为Datable

ng2-smart-table angular

3
推荐指数
1
解决办法
2587
查看次数

当使用ng2-smart表的回调'onComponentInitFunction'函数时,Angular 4,'this'未定义

我在我的组件中使用ng2-smart-table.

我试图调用父组件的approveTheOrder()方法,但我无法获取父类的对象

以下是片段

{
  title: "Actions",
  type: "custom",
  renderComponent: ActionRenderComponent,
  onComponentInitFunction(instance) {
    instance.actionEmitter.subscribe(row => {
      if(row == CONSTANT.STATUS_APPROVE){
        //here 'row' value is from childComponent-ActionRenderComponent,which I am able to get easily in parentComponet 
       this.approveTheOrder(instance.rowData.id); // here this is undefined, 

      }
      if(row == CONSTANT.STATUS_REJECT){
        this.rejectOrder();//this is undefined
      }
      if(row == CONSTANT.STATUS_PENDING){
        this.pendingOrder(); // this is undefined
      }
    });
  },

  filter: false
};
Run Code Online (Sandbox Code Playgroud)

有没有人知道如何在下面的onComponentInitFunction()中获得'this'?

下面是我得到的错误的图像.在此输入图像描述

此外,我试图使用'绑定'功能未能成功实现目标,任何人都可以在这里指导我,我真的卡在这一点.

编辑1 请注意,我能够从中获取事件ChildComponent为父级,但这里的问题是特定于NG2智能表的组成部分.

要从ChildComponent获取值,我正在尝试使用ng2-smart-table组件的onComponentInitFunction(instance)的内置回调函数

ng2-smart-table angular

2
推荐指数
1
解决办法
2492
查看次数

如何过滤从 ng2 智能表中的 valuePreparefunction 返回的自定义数据

我使用 ng2 智能表,我的问题是过滤器,因为我从 ng2 智能表的 valueprepareFunction 返回了自定义数据,

我有这个....

columns: {
id: {
  title: 'Id',
  type: 'string'
},
surname: {
  title: 'surname',
  type: 'string'
},
name: {
  title: 'name',
  type: 'string'
},
date: {
  title: 'date',
  valuePrepareFunction: (value) => {
    if (!value) return '';
    return moment(value).format('DD/MM/YYYY');
  },
}
Run Code Online (Sandbox Code Playgroud)

}

该值是从数据库中获取的 timeStamp,当我尝试从表中进行过滤时,她通过时间戳进行过滤,但我想要使用这种格式的“DD/MM/YYYY”进行过滤。

如何在过滤器之前更改时间戳中的搜索输入?

ng2-smart-table angular

2
推荐指数
1
解决办法
6686
查看次数

ng2-smart-table动态更新列表

我在一列中有一个 ngx-form-settings 和一个下拉对象。此下拉列表应由查询填充(通过服务调用)。

这是设置

site: {
title: 'SITE',
    type: 'html',
            editor: {
              type: 'list',
              config: {
                list: [],
              },
            }
          },
Run Code Online (Sandbox Code Playgroud)

如果我这样做,它会起作用(当然这不是我需要的,因为 setList 必须位于 getData.subscribe 中):

  ngOnInit() {
    this.service.getData().subscribe((data: any) => {
    });
    this.setList();
  }
Run Code Online (Sandbox Code Playgroud)

如果我这样做,它不起作用:

  ngOnInit() {
    this.service.getData().subscribe((data: any) => {
        this.setList();
    });
  }
Run Code Online (Sandbox Code Playgroud)

其中设置列表就是这样(目前):

  setList() {
    this.settings.columns.site.editor.config.list = [{ value: 'Option 1', title: 'Option 1' },
            { value: 'Option 2', title: 'Option 2' },
            { value: 'Option 3', title: 'Option 3' },
            { value: 'Option 4', …
Run Code Online (Sandbox Code Playgroud)

ng2-smart-table angular

2
推荐指数
1
解决办法
3703
查看次数

NG2智能表,从一个对象获取多列

我正在使用 ng2 智能列来显示包含用户对象的交易。我想在不同的列中显示用户 ID、姓名和电子邮件。我该怎么做?

settings = {
    add: {
      addButtonContent: '<i class="nb-plus"></i>',
      createButtonContent: '<i class="nb-checkmark"></i>',
      cancelButtonContent: '<i class="nb-close"></i>',
      confirmCreate : true
    },
    edit: {
      editButtonContent: '<i class="nb-edit"></i>',
      saveButtonContent: '<i class="nb-checkmark"></i>',
      cancelButtonContent: '<i class="nb-close"></i>',
      confirmSave : true
    },
    delete: {
      deleteButtonContent: '<i class="nb-trash"></i>',
      confirmDelete: true,
    },
    columns: {
      id: {
        title: 'ID',
        type: 'number',
      },
   
      user: { 
        title : 'name',
      valuePrepareFunction: (data) => {
                                   return data.email;
                               },
       },

      amount: {
        title: 'Valeur',
        type: 'number',
       
      },
      items: {
        name: { title: 'Nom' …
Run Code Online (Sandbox Code Playgroud)

typescript2.0 ng2-smart-table angular

2
推荐指数
1
解决办法
2903
查看次数

修改ng2智能表中动作的标题或添加一个新的

我想向 ng2-smart-table 添加新操作或修改(添加、编辑或删除)的标题。我试图添加 ButtonView 但我无法用它重现任何操作。

任何人都可以帮助我吗?

typescript ng2-smart-table angular

1
推荐指数
1
解决办法
2124
查看次数

ng2-smart-table在编辑单击时打开弹出窗口

ng2-smart-table当用户单击“编辑”和“新建”按钮时,我想在组件上打开一个弹出页面,但是我无法捕获这些事件。
例如我找不到onEditRowSelect($event)函数,你有什么主意吗?
为了简短起见,我想删除表格内的编辑输入字段并打开一个弹出页面

<ng2-smart-table 
  [settings]="settings" 
  [source]="data"                
  (editConfirm)="onEditRowSelect($event)">
</ng2-smart-table>
Run Code Online (Sandbox Code Playgroud)

这是我的ng2-smart-table设定

this.settings = {

  columns: {
  },
  actions: {
    position: 'right',
    add: true,
    edit:true,
    editable:false,
    columnTitle: '',
  },
  add: {
    addButtonContent: 'NEW',                        
  },
  edit: {
    editButtonContent: 'EDIT',                        
    position: 'right',
  }      
}    

onEditRowSelect(event) {
  console.log(event.data.nombre);             
}
Run Code Online (Sandbox Code Playgroud)

ng2-smart-table angular

1
推荐指数
1
解决办法
2125
查看次数

如何获得angular ng2-smart-table过滤和排序外部事件?

我有 REST API 后端,所以所有的排序、过滤和分页都是由后端管理的。在我的 Angular 应用程序中,我想在 ng2 智能表中显示数据。单击表格标题列名称(按 asc、desc 排序)后,表格内容仅在前端排序。我需要一些事件来调用 REST API 来更新数据(不仅是前端排序),同样我需要按标题输入字段进行过滤。在输入过滤输入后,我需要调用 rest api 从后端获取过滤数据。

如果我将表格模式设置为外部,我只会收到用于创建新项目、删除项目和编辑事件的事件。我怎样才能得到排序和过滤事件?

我尝试了智能表文档中的everithing,但在文档中是仅用于创建删除和更新外部事件而不是排序和过滤的解决方案

ng2-smart-table angular

0
推荐指数
1
解决办法
2639
查看次数