json - 在Angular 5中进行创建后操作时出了什么问题

Question

我是 Angular 5 的新开发者。我想在我的 api 中插入数据，但我Cannot read property 'value' of undefined在控制台屏幕上遇到错误。你能帮我解决这个问题吗？我不明白错误在哪里。

我的示例 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>

标签： jsonangularrestapihttpclient

Answer 1

您必须将输入元素的 绑定到组件的成员变量。然后，只需create()在单击按钮时不带参数调用。create()方法可以从绑定到输入的变量中访问输入值。

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 {
  public name: string;
  public address: string;
  public contactName: string;
  public contactSurname: string;
  public contactPhone: string;
  public secondContactPhone: string;

  title="Bank";
  bank:Bank[];
  city:City[];
  constructor(private bankService:BankService) { }
  ngOnInit() {}

  create(){
    const newPost : Bank= new Bank();
    newPost.name = this.name;
    newPost.address = this.address;
    newPost.contactName = this.contactName;
    newPost.contactSurname = this.contactSurname;
    newPost.contactPhone = this.contactPhone;
    newPost.secondContactPhone= this.secondContactPhone;
    this.bankService.CreateUser(newPost).subscribe((resp: Bank)=>{console.log(resp);this.bank.push(resp);
    });
  }
}



<table style="width:500px;">
  <tr>
    <td>New name:</td>
    <td><input [(ngModel)]="name"></td>
  </tr>
  <tr>
    <td>New address:</td>
    <td><input [(ngModel)]="address"></td>
  </tr>
  <tr>
    <td>New contactName:</td>
    <td><input [(ngModel)]="contactName"></td>
  </tr>
  <tr>
    <td>New contactSurname:</td>
    <td><input [(ngModel)]="contactSurname"></td>
  </tr>
  <tr>
    <td>New contactPhone:</td>
    <td><input [(ngModel)]="contactPhone"></td>
  </tr>
  <tr>
    <td>New secondContactPhone:</td>
    <td><input [(ngModel)]="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()">add</button>
  </tr>
</table>