Question

我有一个动态生成的客户表单。表单字段在 customers.ts 文件中设置：

pip install azure-storage-blob==12.0.0

在组件文件 customers.component.ts 中，我有一个数组

public static customerForm = {
    custFormWrap: [
        {
            custFormBody: [
            {
             type: "input",
             label: "Last Name",
             name: "last_name",
            },
            {
             type: "select",
             label: "Customer type",
             name: "customer_type",
             options:[],
            },
       ]
 }
}

我可以在组件文件中获取custFormBody，但是如何将数组值分配给customers: [id:1,title:"Regular",id:2,title:"premium"] select的选项？

有关于stackoverflow的答案，但是就像将数组A的值分配给数组B但在同一文件中一样，找不到答案。

Answer 1

感谢您分享代码。这是将客户数组分配给下拉选项的方法。

只需使用传播运算符而不是 object.assign

import { Component } from '@angular/core';
import * as formObj from './forms/customers';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  customerForm:any;

  customers= [
    {id:1, title:"Regular"},
    {id:1, title:"Premium"}
  ]

  constructor() { 
    this.customerForm = formObj.customers.customerForm;
  }

  ngOnInit() {
   
    for(let i = 0; i < this.customerForm.custFormWrap[0].custFormBody.length; i++) {
      let abc = this.customerForm.custFormWrap[0].custFormBody[i].options;
      if (abc) {
      this.customerForm.custFormWrap[0].custFormBody[i].options = [...this.customers];
      }

      console.log("final ", this.customerForm.custFormWrap[0].custFormBody[i].options);
    }  
  }
}

如果您要从 customers.component.ts 访问客户数组，则将其导入到您的应用程序组件中

import { Component, OnInit } from '@angular/core';
import * as formObj from '../forms/customers';

@Component({
  selector: 'app-customers',
  templateUrl: './customers.component.html',
  styleUrls: ['./customers.component.css']
})
export class CustomersComponent implements OnInit {

  custData:any;

  customers: [
    {id:1, title:"Regular"},
    {id:1, title:"Premium"}
  ]

  constructor() { 
    this.custData = formObj.customers.customerForm;
  }

  ngOnInit() {
    for(let i = 0; i < this.custData.custFormWrap[0].custFormBody.length; i++) {
      if(this.custData.formSteps[0].formFields[i].name == "country"){
        console.log("Testing ", this.custData.formSteps[0].formFields[i].options);

      }
    }  
  }

}

也将此客户组件添加到提供商数组中的 app.module.ts 中。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { CustomersComponent } from './customers/customers.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent, CustomersComponent ],
  providers: [CustomersComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Angular-如何将数组数据以动态形式分配给另一个对象

1 个答案: