Ошибка типа: _co.post не определен

Question

Я хочу добавить дополнение с угловым API, но оно выдает мне ошибку "ERROR TypeError:"

_co.post is not defined

post.component.ts

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';


@Component({
  selector: 'posts',
  templateUrl: './posts.component.html',
  styleUrls: ['./posts.component.css']
})
export class PostsComponent implements OnInit {
  posts:any[]=[];

  post:{
    id:0,
    title:'',
    body:'',
    userId:''
  };


  constructor( private http:Http ) {
    this.http.get('https://jsonplaceholder.typicode.com/posts')
     .subscribe(Response=>{
       this.posts=Response.json()
    });
  }

  ngOnInit() {
  }

  createPost(){
    this.http.post('https://jsonplaceholder.typicode.com/posts',this.post)
    .subscribe(response=>{
      console.log(response.json())
    })
  }

}

post.component.html

<form>
    <legend>New post</legend>

    <div class="form-group">
        <label for="title">label</label>
        <input [(ngModel)]="post.title" type="text" name="title" id="title" class="form-control" id="title" placeholder="title">
    </div>
    <div class="form-group">
        <label for="body">label</label>
        <textarea [(ngModel)]="post.body" type="text" name="body" id="body"  class="form-control" id="body" placeholder="body"></textarea>
    </div>



    <button (click)="createPost()" type="submit" class="btn btn-primary">Submit</button>
</form>
<p>{{ post | json }}</p>


<ul class="list-group">
    <li class="list-group-item" *ngFor="let post of posts">
           <h4>{{ post.title }}</h4>
           <p>{{ post.body }}</p>
    </li>
</ul>

app.module.ts

import { CoursesService } from './courses.service';
import { CoursesComponent } from './courses.component';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';

import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { CourseComponent } from './course/course.component';
import { EmailService } from './email.service';
import { FavoriteComponent } from './favorite/favorite.component';
import { PanelComponent } from './panel/panel.component';
import { InputFormatDirective } from './input-format.directive';
import { ContactFormComponent } from './contact-form/contact-form.component';
import { SignupFormComponent } from './signup-form/signup-form.component';
import { PostsComponent } from './posts/posts.component';


@NgModule({
  declarations: [
    AppComponent,
    CoursesComponent,
    CourseComponent,
    FavoriteComponent,
    PanelComponent,
    InputFormatDirective,
    ContactFormComponent,
    SignupFormComponent,
    PostsComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule
  ],
  providers: [
    CoursesService,
    EmailService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

Изменить свойство сообщения в post.component.ts.

post:{
    id:0,
    title:'',
    body:'',
    userId:''
  };

TO

  post: any ={
    id:0,
    title:'',
    body:'',
    userId:''
  };