Angular 动态增减表单项

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Angular 动态增减表单项相关的知识,希望对你有一定的参考价值。

参考技术A angular10 FormArray 实现动态增减表单项

先创建一个响应式表单

Angular 2智能表动态数据不加载

【中文标题】Angular 2智能表动态数据不加载【英文标题】:Angular 2 smart table dynamic data don't load 【发布时间】:2019-02-05 13:27:20 【问题描述】:

我使用 Angular 6 和智能表: https://akveo.github.io/ng2-smart-table/#/。

一切正常,直到我尝试将数据从静态更改为动态:

这有效并显示了表格中的所有内容:

  source: LocalDataSource = new LocalDataSource();
 data = [
    id: 1,
    Customer: 'UK LTD',
    Name: 'Mark Poll',
    Code: '84615A',
    PostalCode: 'U48K46',
    Date: '09/19/2018',
  ,
  ];
  this.source.load(this.data);

这不是:

data1 = [];
      source: LocalDataSource = new LocalDataSource();
      getArray() 
        this.afDatabase.list('/imones').valueChanges().subscribe(res => 
          this.data1 = res;
          console.log(this.data1)
        )
      

          this.source.load(this.data1);

输出相等:

这有什么问题,也许有人正面临这个问题?

【问题讨论】:

它不起作用,因为您在第二个示例中的数据加载是异步的。 那么,我不应该订阅它吗?如果你熟悉firebase,能给我举个例子吗? 【参考方案1】:

我之前没有使用过 Firebase 或 ng2-smart-table,但如果您在订阅中移动数据源的加载,它应该可以工作。

source: LocalDataSource = new LocalDataSource();
getArray() 
   this.afDatabase.list('/imones').valueChanges().subscribe(res => 
      this.source.load(res);
   )

【讨论】:

以上是关于Angular 动态增减表单项的主要内容,如果未能解决你的问题,请参考以下文章

Angular 新手,非响应式动态表

Angular 2智能表动态数据不加载

Angular:从卡片路由到新视图

使用不同的 CSS 样式表动态更改 Angular 组件的样式

Angular Material 表动态列

如何在Angular 9中隐藏动态表的元素