Блог

Использование с REST API.

Message.component.ts

 export class Message {
  author: string;
  message: string;
  created:string;
 id:number;

}
  

Это (hero.service.ts)

 import {Injectable} from '@angular/core';
import { Hero } from './hero';
import {Message} from './message';
import {Headers,Http,RequestOptions} from '@angular/http';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';
import { Observable }  from 'rxjs/Observable';
@Injectable()
export class HeroService{
    private heroesUrl= 'app/heroes';
    private headers=new Headers({'Content-Type':'application/json'});
    constructor(private http:Http){}

     addMessage (json): Observable<Message> {
 // let body = JSON.stringify({ json });
  console.log(json);
    let resturl=   "http://localhost:8080/messenger/webapi/messages";
    //alert(resturl);
    let headers_rest = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers_rest });

    return this.http.post(resturl, json, options)
                    .map(res=>res.json())
                    .catch(this.handleError);
  }

    private extractData(res) {
  let body = res.json();
  return body.data || { };
}
  

===>Это heroes.component.ts

 obj={author:"",message:"",created:"2016-10-22T12:10:45.683",id:0};
  

    addMessage(){
  console.log(this.obj);
  this.heroService.addMessage(this.obj)
                   .subscribe(
                    (data)  =>{this.obj=data;
                       console.log("SUCCESS" this.obj)},
                     error =>  this.errorMessage = <any>error
                     );}
}

[ Error Console Show When i click AddMessage button "Cannot read property '0' of undefined  "  ][1]
  

Это серверный REST API для приема основного сообщения из HTTP POST-запроса.

 package org.littlefish.minthurein.messenger.resources;
import java.util.List;
import javax.print.attribute.standard.Media;
import javax.ws.rs.Consumes;
import javax.ws.rs.GET;
import javax.ws.rs.POST;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;

import org.littlefish.minthurein.messenger.model.Message;
import org.littlefish.minthurein.messenger.service.MessageService;

@Path("/messages")
public class MessageResource {
    MessageService messageService=new MessageService();

    @POST
    @Consumes(MediaType.APPLICATION_JSON)
    @Produces(MediaType.APPLICATION_JSON)
    public Message addMessage(Message message){
    System.out.println("Author" message.getAuthor() "Message" message.getMessage());
    return  messageService.addMessage(message);
    }
  

Шаблон heroes.component.ts

 template: `
    <h2>My Heroes</h2>
    <ul class="heroes">
      <li *ngFor="let hero of heroes"
        [class.selected]="hero === selectedHero"
        (click)="onSelect(hero)">
        <span class="badge">{{hero.id}}</span> {{hero.name}}
         <button class="delete" (click)="delete(hero); $event.stopPropagation()">X</button>
      </li>
    </ul>
<div *ngIf="selectedHero">
  <h2>
    {{selectedHero.name | uppercase}} is my hero
  </h2>
  <button (click)="gotoDetail()">View Details</button>
</div>
<div>
  <label>Hero name:</label> <input #heroName />
  <button (click)="add(heroName.value)" heroName.value=''>
    Add
  </button>
</div>

*<div>
Author : <input type="text" [(ngModel)]="obj.author"  />
Message : <input type="text" [(ngModel)]="obj.message"  />
<button (click)="addMessage()">Add Message</button>
</div>*
  

Ошибка ссылки на изображение консоли.

https://i.stack.imgur.com/onqbw.png

Я попытался с помощью POSTMAN убедиться, что REST API в запросе на стороне сервера действительно работает. Это сработало с POSTMAN.Как я могу исправить эту ошибку?Пожалуйста