我正在为Angular2寻找更好的表格表示,并发现ng2-smart-table很好用.但问题是它似乎没有提供在内联编辑中使用下拉列表或日期选择器的直接方法.
有没有办法使它成为可能或我可以用什么替代组件来代表我的Angular2应用程序中的表视图.
我正在尝试向自定义操作添加按钮，但是该操作未添加新列，从而使按钮与其他按钮重叠。
码：
settings = {
actions: {
custom: [
{
name: 'Button',
title: 'Button ',
}
],
},
columns: {
name: {
title: 'Full name'
},
email: {
title: 'Email'
},
lastLogin: {
title: 'Last Login'
}
}
};
我需要在图像上添加一个链接，因为我在这里的声誉不高，并且图像工具对我来说是被阻止的。
我究竟做错了什么？
我正在使用 ng Smarttable 并通过事件更改数据源数组（更改是数组内值的 id 更改）。问题是 angular 无法检测到更改，并且在我将鼠标悬停在页面上或单击某处之前没有任何反应。
因此，更改在幕后正确应用，并且一旦我单击某处，angular 就会“看到”这些更改。
所以我可以手动点击很多次来查看 chaning 属性，但这不是我们想要的。
我试过：
有可能有这样的东西吗？
this.renderer.refresh();
还是仅使用 ng smartable 的功能？
编辑：看起来问题出在我这边。当您“刷新”智能表时，您会得到一个承诺，该承诺仅在加载完成后执行。
我没有使用承诺。将正常的 DetectChange() 放在承诺中使其工作
I am using ng2-smart-table from https://akveo.github.io/ng2-smart-table/#/documentation
Live Demo: http://akveo.com/ngx-admin/pages/tables/smart-table
Please help me with below questions:
I want to select multiple rows and call one function so where I need to write this code in ng2-smart-table?
Can I select multiple rows and call one function on selected rows ?
I have written below code in .ts and .html files:
smart-table-component.ts:
actions: {
add: false,
edit: true,
delete: false,
custom: [{ name: 'ourCustomAction'}],
position: 'left',
columnTitle: 'Actions'
},
mode: 'external',
smart-table-component.html: …
我在我的项目中使用ng2-smart-table组件,我发现了一个阻碍我的问题.
我有一个智能表(mode = inline),有3列:id,column1和column2.Id不可编辑,因为在我调用后端并生成行之前,我不会知道值,因此当我添加新行时,ID的单元格仍为空.
我正在听发射器"onCreateConfirm",当它被触发时,我用后置请求调用我的后端并等待响应.
当我处理响应时,我一直无法找到更新行中该单元格的方法.
有人遇到同样的问题吗？这种流程是否可行,或者是组件的限制？
也许我做错了什么,我根本不应该遵循这个流程,还有另一种方法可以做到这一点.
任何帮助将不胜感激.
我正在使用 Angular2 并且我正在尝试为我的Smart Table 中的每一行添加一个视图链接。我正在使用允许我呈现自定义组件的自定义类型来执行此操作。
渲染过程运行良好，但现在我需要将数据（项目的 id）传递给自定义组件，但我不知道数据是如何发送到模板的，因此我无法访问它。
这是我的表组件：
export class ShowLoans {
query: string = '';
settings = {
actions: {
delete: false,
add: false
},
columns: {
//...
actions: {
title: 'Acciones',
type: 'custom',
renderComponent: ViewLoan
}
}
};
source: LocalDataSource = new LocalDataSource();
constructor(protected loanService: LoanService) {
this.loanService.getAllLoans().subscribe((data) => {
this.source.load(data.loans);
});
}
这是我的自定义组件：
@Component({
selector: 'viewloan',
templateUrl: './viewLoan.html'
})
export class ViewLoan {
public loan: Loan;
constructor(){
}
}
**注意：ViewLoan 组件被声明为 entryComponent。
我的设置如下。当我单击“添加新”链接时，ID 单元格是可编辑的。我们想让该字段不可编辑。
mySettings = {
columns: {
id: {
title: 'ID',
editable: false,
},
name: {
title: 'Name',
},
lastname: {
title: 'Last Name',
},
}
};
这是我的三列的示例。我想自定义宽度大小。
resetPassword: {
title: this.gridTittle["ResetPassword"],
type: 'custom',
renderComponent: UserPasswordResetComponent,
filter: false
},
userName: {
title: this.gridTittle["UserName"],
},
roleTypeDescription: {
title: this.gridTittle["UserType"],
type: 'text',
filter: false
},
在 Angular 应用程序中，我使用了ng2-smart-table. 我已经启用了分页。但它显示正常的外观。我没有使用默认外观，而是使用带有页面选项的下拉菜单。
<select>
<option>5</option>
<option>10</option>
<option>15</option>
</select>
我也设置了更改事件。
问题：
1）如何更新ng2-smart-table以根据值更改设置页面大小。
2）我也想在特定页面上移动。例如：表有 1000 条数据，每个寻呼机有 10 条记录。所以我只想在14. 那么，我该怎么做呢？
为此，我参考了它的文档，但我没有得到任何事件。
我有一个表格，单元格中有一个自定义组件，还有一个服务为我提供一些要显示的数据。我的自定义组件实现了 select。因此，表的列如下所示：
userRole: {
title: 'User Role,
type: 'custom',
renderComponent: SelectComponent,
onComponentInitFunction: (instance) => {
instance.selectEdit
.subscribe( (data) => {
console.log(data);
});
}
},
选择.component.html：
<select #select
(change)="callType(select.value)"
>
<option *ngFor="let option of options"
attr.value="option.id" >{{option.name}}</option>
</select>
选择.组件.ts：
export class SelectComponent implements OnInit, OnChanges, ViewCell {
@Input() value: string | number;
@Input() rowData: any;
@Input() options;
@Output() selectEdit = new EventEmitter();
constructor() {
}
ngOnInit() {
}
ngOnChanges(changes: SimpleChanges): void {
}
callType(event) {
this.selectEdit.emit(event);
}
}
似乎instance对象应该具有 …