0
我无法弄清楚如何让我的数据通过FormComponent中的onSubmit（）发布，以便它在我的表中显示，您从UsersComponent中获取屏幕截图 我仍然对此感到陌生，但我觉得我很亲密。 任何人都可以指出我做错了什么。 了OnSubmit目前抛出以下错误：将数据添加到JSON表onClick
Supplied parameters do not match any signature of call target.
FormComponent
import { Component, OnInit } from '@angular/core';
import {UserService} from '../users.service';
import {Http} from '@angular/http';
import {Router} from '@angular/router';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css'],
providers: [UserService]
})
export class FormComponent implements OnInit {
private _user;
constructor(private _userService: UserService){
}
onSubmit(){
this._userService.addUser()
.subscribe(res => {
this._user=res;
})
}
}
UserService
import {Injectable} from '@angular/core';
import 'rxjs/add/operator/map';
import {Http} from '@angular/http';
@Injectable()
export class UserService{
constructor(private _http:Http){
}
getUsers(){
return this._http.get("https://jsonplaceholder.typicode.com/users")
.map(res=>res.json());
}
addUser(post){
return this._http.post("https://jsonplaceholder.typicode.com/users", JSON.stringify(post))
.map(res=> res.json());
}
}
form.component.html（非常自信这部分是正确的）
<form #f="ngForm" (ngSubmit) = "onSubmit(f.value)">
<h2>User</h2>
<label for="name">Name</label>
<input ngModel id="name" #name="ngModel" name="name" required minLength="3" class="form-control">
<div *ngIf="name.touched && name.errors">
<div *ngIf="name.errors.required" class="alert alert-danger">Required</div>
<div *ngIf="name.errors.minlength" class="alert alert-danger">Minlength is 3</div>
</div>
<label for="email">Email</label>
<input ngModel id="email" #email="ngModel" name="email" required minLength="3" class="form-control">
<div *ngIf="email.touched && email.errors">
<div *ngIf="email.errors.required" class="alert alert-danger">Required</div>
<div *ngIf="email.errors.minlength" class="alert alert-danger">Minlength is 3</div>
</div>
<label for="phone">Phone</label>
<input ngModel id="phone" #phone="ngModel" name="phone" required minLength="3" class="form-control">
<div *ngIf="phone.touched && phone.errors">
<div *ngIf="phone.errors.required" class="alert alert-danger">Required</div>
<div *ngIf="phone.errors.minlength" class="alert alert-danger">Minlength is 3</div>
</div>
<h2>Address</h2>
<label for="street">Street</label>
<input ngModel id="street" #street="ngModel" name="street" required minLength="3" class="form-control">
<div *ngIf="street.touched && street.errors">
<div *ngIf="street.errors.required" class="alert alert-danger">Required</div>
<div *ngIf="street.errors.minlength" class="alert alert-danger">Minlength is 3</div>
</div>
<label for="suite">Suite</label>
<input ngModel id="suite" #suite="ngModel" name="suite" required minLength="3" class="form-control">
<div *ngIf="suite.touched && suite.errors">
<div *ngIf="suite.errors.required" class="alert alert-danger">Required</div>
<div *ngIf="suite.errors.minlength" class="alert alert-danger">Minlength is 3</div>
</div>
<label for="city">City</label>
<input ngModel id="city" #city="ngModel" name="city" required minLength="3" class="form-control">
<div *ngIf="city.touched && city.errors">
<div *ngIf="city.errors.required" class="alert alert-danger">Required</div>
<div *ngIf="city.errors.minlength" class="alert alert-danger">Minlength is 3</div>
</div>
<label for="zipcode">Zip Code</label>
<input ngModel id="zipcode" #zip="ngModel" name="zipcode" required minLength="3" class="form-control">
<div *ngIf="zip.touched && zip.errors">
<div *ngIf="zip.errors.required" class="alert alert-danger">Required</div>
<div *ngIf="zip.errors.minlength" class="alert alert-danger">Minlength is 3</div>
</div>
<button type="submit" [disabled] ="!f.valid" class="btn btn-primary">Submit</button>
</form>
Form: {{f.value | json}}