我是Angular 5的新开发人员。我想让插入数据成为我的API，但我在控制台屏幕上遇到了一个错误：
无法读取未定义的属性“value”
你能帮我解决这个问题吗？我不明白错误在哪里。
我的JSON数据示例如下：

{
        "id": "",
        "name": "",
        "address": "",
        "contactName": "",
        "contactSurname": "",
        "contactPhone": "",
"secondContactPhone":"",
        "city": {
            "id": 1,
            "name": "asd",
            "code": 1
        },
        "town": {
            "id": 2,
            "name": "asd",
            "city": {
                "id": 1,
                "name": "asd",
                "code": 1
            }
        },

字符串

我的组件

import { Component, OnInit } from '@angular/core';
import { Bank } from '../models/bank';
import { City } from '../models/city';
import { BankService } from './bank.service';
import { Town } from '../models/town';

@Component({
  selector: 'app-bank',
  templateUrl: './bank.component.html',
  styleUrls: ['./bank.component.css'],
  providers:[BankService]
})
export class BankComponent implements OnInit {
  title="Bank";
  bank:Bank[];
  city:City[];
  constructor(private bankService:BankService) { }
  ngOnInit() {}
 
  Create(name: string,address: string,contactName: string,contactSurname:string,contactPhone: string,secondContactPhone: string, city:City,town:Town){
    const newPost : Bank= new Bank();
    newPost.name = name;
    newPost. address = address;
    newPost.contactName=contactName;
    newPost.contactSurname=contactSurname;
    newPost.contactPhone=contactPhone;
    newPost.secondContactPhone= secondContactPhone;
    newPost.city=city;
    newPost.town=town;
    this.bankService.CreateUser(newPost).subscribe((resp: Bank)=>{console.log(resp);this.bank.push(resp);
    });
  }
}

型
我的服务

import { Injectable } from '@angular/core';
import { HttpClient,HttpHeaders } from "@angular/common/http";
import { of } from 'rxjs/observable/of';
import { Bank } from "../models/bank";
import { Observable } from '../../node_modules/rxjs/Observable';

@Injectable()
export class BankService {
  
  private bankURL = 'exampleURL';
    httpOptions = {
        headers: new HttpHeaders({
          'Authorization':'bearer example token',
          'Access-Control-Allow-Origin':'*',
          'Access-Control-Allow-Methods':'*',
          'Access-Control-Allow-Headers':'*'
        }),
        withCredentials: false
      };
     
constructor(private http:HttpClient) { }
CreateUser(obj: Bank){return this.http.post(this.bankURL,obj,this.httpOptions);}


}

型

我的HTML

<table style="width:500px;">
  <tr>
    <td>New name:</td>
    <td><input #name></td>
  </tr>
  <tr>
    <td>New address:</td>
    <td><input #address></td>
  </tr>
  <tr>
    <td>New contactName:</td>
    <td><input #contactName></td>
  </tr>
  <tr>
    <td>New contactSurname:</td>
    <td><input #contactSurname></td>
  </tr>
  <tr>
    <td>New contactPhone:</td>
    <td><input #contactPhone></td>
  </tr>
  <tr>
    <td>New secondContactPhone:</td>
    <td><input #secondContactPhone></td>
  </tr>
  <tr><td>New city</td>
    <td>
      <select >
        <option *ngFor="let sec of bank">{{sec?.city?.name}}</option>
      </select>
    </td>
  </tr>
  <tr><td>New city</td>
    <td>
      <select >
        <option *ngFor="let sec of bank">{{sec?.town?.name}}</option>
      </select>
    </td>
  </tr>
  
  <tr>
    <button (click)="Create(name.value,address.value,contactName.value,contactSurname.value,contactPhone.value,secondContactPhone.value);name.value='';">add</button>
  </tr>
</table>

型