Question

数据1

     []
     0: {type: "text", name: "first_name", label: "First Name", value: "", required: true}
     1: {type: "text", name: "last_name", label: "Last Name", value: "", required: true}
       length: 2
       __proto__: Array(0)

数据2

       (2) [{…}, {…}]
       0: {type: "text", name: "first_name", label: "First Name", value: "", required: true}
       1: {type: "text", name: "last_name", label: "Last Name", value: "", required: true}
    length: 2
  __proto__: Array(0)

API Json

        FIELDS_FILTERS: [
        {
        type: "text",
        name: "first_name",
        label: "First Name",
        value: "",
        required: true,
        },
        {
        type: "text",
        name: "last_name",
        label: "Last Name",
        value: "",
        required: true,
        },
        ],

角度代码

export class DynamicFormsTestComponent implements OnInit {
              publicDeals: Person[] = [];
              public form: FormGroup;
              public fields1: any[] = [
                {
                  type: 'text',
                  name: 'first_name',
                  label: 'First Name',
                  value: '',
                  required: true,
                },
                {
                  type: 'text',
                  name: 'last_name',
                  label: 'Last Name',
                  value: '',
                  required: true,
                },
              ];
              p_col: any;


              constructor(private httpClient: HttpClient, private http: Http, private formBuilder: FormBuilder,
                private personservice: PersonService) {}
              ngOnInit() {

                this.getOtherDetails();
                this.p_col = this.publicDeals;
                this.form = new FormGroup({
                  fields: new FormControl(this.publicDeals)
                });
              }

              getFields() {

              return this.p_col;  ----this don't works
             -- return this.fields1;  --this works
              }

              getOtherDetails() {
                return this.personservice.getDatatableDetails()
                  .subscribe(persons => {
                    persons.FIELDS_FILTERS.forEach(element => {
                      this.publicDeals.push(element);
                    });
                  });
              }

this.p_col输出数据2，很好

组件html

    {{publicDeals|json}}
    <app-dynamic-form-builder [fields]="getFields()"></app-dynamic-form-builder>

当我转储json时。

输出

 [{
"type": "text",
"name": "first_name",
"label": "First Name",
"value": "",
"required": false
  }, {
"type": "text",
"name": "last_name",
"label": "Last Name",
"value": "",
"required": false
 }]

现在我已经在动态组件中以data2的形式发送了正确的格式数据，但是当尝试打印此数据时.fields的数据格式被更改为数据1。

如果我在动态组件中输出的是数据2，那么我的代码将起作用。

动态分量ts

        export class DynamicFormBuilderComponent implements OnInit {
          // @Output() onSubmit = new EventEmitter();
          @Input() fields: any[] = [];
          form: FormGroup;
          persons: Person[];
          submitted = false;
          constructor(private router: Router, private personservice: PersonService) { }

          ngOnInit() {


            console.log(this.fields); 
           console.log(typeof(this.fields)); --always return object

            console.log(this.fields.length);  
           --length 0  this.publicdeals.
           --length 2  this.fields1.

       const fieldsCtrls = {};
        for (const f of this.fields) {
        console.log('for lopp true=============');


        }
        this.form = new FormGroup(fieldsCtrls);
            }

数据1

console.log(this.publicDeals)

数据2

  console.log(this.fields1)

问题

在动态组件中访问json this.publicDeals时，其field.length为0。
但是在访问this.field1时它返回长度2。
我可以使用硬编码数组访问动态组件中的数据，但是从api服务渲染数据时会出现问题。

Answer 1

您需要输入以下行：

        this.p_col = this.publicDeals;
        this.form = new FormGroup({
          fields: new FormControl(this.publicDeals)
        });

getOtherDetails（）中的UNDER订阅功能

       getOtherDetails() {
            return this.personservice.getDatatableDetails()
              .subscribe(persons => {
                persons.FIELDS_FILTERS.forEach(element => {
                  this.publicDeals.push(element);
                });
                .....HERE....
              });

考虑到this.publicDeals在调用完成之前没有任何价值

Answer 2

有效的解决方案

 <app-dynamic-form-builder  *ngIf="publicDeals.length > 0" [fields]="publicDeals"></app-dynamic-form-builder>

无法在Angular 7的FormControl中附加值

2 个答案: