Question

我有一系列角度材料控件及其属性。

我有一个数据库集合及其字段列表的数组。

我在我的角度项目的特定组件中也有一个数据表，它将用集合数组元素数据填充。

下面是一些示例代码：

收集字段界面：

export interface ICollectionFields {
  columnTitle: string;
  Type: string;
  control: IControls;
  columnWidth: number;
}

收藏界面：

export interface ICollections {
  collectionName: string;
  collectionFields: ICollectionFields[];
  collectionFieldValidation: IControlValidation[];
  hasPaginator: boolean;
  stickyColumn: number;
  stickyHeader: boolean;
}

控制界面：

export interface IControls {
  controlName: controlsEnum;
  placeHolder?: string;  // input, SelectTrigger
  type?: 'color'|'date'|'datetime-local'|'email'|'month'|'number'|'password'|'search'|'tel'|'text'|'time'|'url'|'week'; // input
  enabled?: boolean; // input
  matAutosize?: boolean; // input
  matAutosizeMaxRows?: number; // input
  matAutosizeMinRows?: number; // input
  matTextareaAutosize?: boolean; // textarea
  .
  .
}

我的验证程序界面（目前不重要）：

export interface IControlValidation {
  validatorTitle: string;
  validation_rols: string;
}

数组的定义如下：

public collections: ICollections[] = [
  {
    collectionName: 'Brands',
    collectionFields: [
      {
        columnTitle : 'brandTitle',
        Type : dtEnum.string,
        control: {
          controlName: controlsEnum.input,
          placeHolder: 'Enter brand title',
          autocomplete: false,
        },
        columnWidth: 200
      }
    ],
    collectionFieldValidation: [{name: 'test'}],
    hasPaginator: true,
    stickyColumn: 0,
    stickyHeader: true
  }
];

我打算添加一个图标按钮来编辑提到的数据表的每一行。当用户单击它时，将出现一个对话框。

在此对话框中，我希望具有与行的每个字段的数据类型相关的合适控件以及我的材料数组中的指定控件。

现在，我的问题是两件事：

1-如何将控件添加到对话框html部分？

2-如何为每个控件动态添加属性？

我还没有设计数据表。但理论上我想知道这是怎么可能的？

非常感谢。

Answer 1

一旦创建了组件，就必须将它们添加到输入组件中的模块中。（以防您没有单独的模块）应该是app.module。

entryComponents: [ HeroJobAdComponent, HeroProfileComponent ]

https://angular.io/guide/dynamic-component-loader

NgModule({
  declarations: [AppComponent, HeaderComponent, ErrorComponent],
  imports: [
   ....
  ],
  providers: [
   ....
  ],
  entryComponents: [ HeroJobAdComponent, HeroProfileComponent ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Answer 2

这是完整的解决方案：

Create a dynamic form with configurable fields and validations using angular 2+

如何动态创建角度材料？

2 个答案: