angular - ng2-smart-table 动态更新列表

标签 angular ng2-smart-table

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

这是设置:

site: {
title: 'SITE',
    type: 'html',
            editor: {
              type: 'list',
              config: {
                list: [],
              },
            }
          },

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

  ngOnInit() {
    this.service.getData().subscribe((data: any) => {
    });
    this.setList();
  }

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

  ngOnInit() {
    this.service.getData().subscribe((data: any) => {
        this.setList();
    });
  }

设置列表就是这个(现在):

  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', title: 'Option 4' },
            { value: 'Option 5', title: 'Option 5' },
            { value: 'Option 6', title: 'Option 6' },
    ];
  }

我错过了什么?

最佳答案

我想通了,

调用 ngOnInit 并设置设置。重点是订阅(在不起作用的情况下)立即返回并且 ngOnInit 无法初始化列表。 “设置”不是动态更新的,可以这么说。我发现的解决方法是:

ngOnInit() {
    this.service.getData().subscribe((data: any) => {
    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', title: 'Option 4' },
        { value: 'Option 5', title: 'Option 5' },
        { value: 'Option 6', title: 'Option 6' }];
    });
    this.settings = Object.assign({}, this.settings);
}

当服务返回并执行订阅的方法时,唯一的机会是重新加载整个设置结构。

this.settings = Object.assign({}, this.settings);

关于angular - ng2-smart-table 动态更新列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55172590/

相关文章:

Angular CDK 虚拟滚动无限循环

node.js - Ng2-Smart-table 不起作用,返回 404 未找到错误和 system.js 错误

angular - 当用户单击 ng2-smart-table 中的 'add new' 时禁用单元格

angular - 带有后端分页的 ng2-smart-table (Spring)

angular - 如何手动强制重新渲染Angular2中的组件?

Angular - 如何最好地处理服务及其订阅中的主题?

javascript - Angular 2 模型驱动表单中的默认无效选择选项?

html - Angular 2 '@Component' 装饰器是否总是需要一个元素名称选择器?

javascript - Angular:@Input 值在模板中可用,但在组件中不可用

typescript - 使用 AngularFire 和 Firestore 使用 Ng2 智能表显示嵌套对象