Question

对于这个问题，我不熟悉棱角或前端开发。我正在尝试将表单值双向绑定到角度模型的“嵌套数组字段”。不幸的是，它不起作用，并返回未定义或错误。对我来说肯定是个大错，请提供修复建议。

代码如下，

customer.model.ts

export class Customer {
customerID:String;
customerName:String;
contract:Contract[];
}

export class Contract{
    customerID: String;
    startDate: Date;
    endDate:  Date ;
    conditions: String;
    price: Number;
    author: String; 
}

customer.component.ts

//Package imports
import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';

//local imports
import { CustomerService } from '../shared/customer.service';
import { Contract,Customer } from '../shared/customer.model';

declare var M: any;

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

  constructor(private customerService: CustomerService) { }

  ngOnInit() {
    this.resetForm();
  }

  resetForm(form?: NgForm) {
    if (form) {
      form.reset();

      this.customerService.selectedCustomer = {

        customerID: "",
        customerName: "",
        contract: [
          {
            customerID: "",
            startDate: null,
            endDate: null,
            conditions: "",
            price: null,
            author: ""
          }
        ]
      }
    }
  }

  onSubmit(form: NgForm) {

    this.customerService.postCustomer(form.value).subscribe((res) => {
      this.resetForm(form);
       M.toast({ html: 'Saved successfully', classes: 'rounded' });
    });


  }


}

customer.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Operatoroperator';


import { Customer,Contract } from './customer.model';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
@Injectable({
  providedIn: 'root'
})
export class CustomerService {
  selectedCustomer: Customer|{}={};
   customers: Customer[];

  readonly baseURL = 'http://localhost:3000/customers';

  constructor(private http: HttpClient) { }

  postCustomer(cust: Customer) {
    console.log('front end cust value' + cust + '---' + cust.contract + '----' + cust.customerID + '----' + cust.customerName);
    return this.http.post(this.baseURL, cust);
  }


}

customer.component.html（仅摘要）

选项1：

<input type="text" name="startDate" #name="ngModel" [(ngModel)]="customerService.selectedCustomer.contract.startDate"
                      placeholder="Enter Contract Start Date">

选项2：

<input type="text" name="startDate" #name="ngModel" [(ngModel)]="customerService.selectedCustomer.contract[0].startDate"
                          placeholder="Enter Contract Start Date">

选项3：

<input type="text" name="startDate" #name="ngModel" [(ngModel)]="customerService.selectedCustomer.contract[].startDate"
                          placeholder="Enter Contract Start Date">

选项4：

<input type="text" name="startDate" #name="ngModel" [(ngModel)]="customerService.selectedCustomer.contract[startDate]"
                      placeholder="Enter Contract Start Date">

如何将表单值双向绑定到嵌套角度模型

0 个答案: