Angular 2 *ngFor and form submit ceased working when moved to observables

问题

I had an app initiating course components like this:

<li *ngFor="let course of courses">
      <app-course [appCourse]="course" 
      (remove)="removeItem($event)"
       ></app-course>
</li>

from an array pulled from local storage, which was populated from a course form, sending an object like this:

 {
   "_id": "587f52ad266c32fbfb10f21a",
   "end": "31/1/2017",
   "start": "1/1/2017",
   "desc": "see title",
   "name": "Intro To Express",
   "id": 1,
   "__v": 0,
   "updated_at": "2017-01-18T11:34:05.416Z"
}

Then I added a back end with observables. Now, the form submits an object, I can see if I console log it that it's in the right shape.

Then it goes to an intermediary service, which pushes it to the service which manages the backend:

addItem(course) { 
    this.storage.post(course).subscribe((data: any) => 
    {console.log(JSON.stringify(data)); return (data); }, error => 
    {console.log(error)});; }

I can still see the object as I'm pushing it to to the service from my main component with console.log():

{"name":"test","id":"1234","desc":"test","start":"2017-01-30‌","end":"2017-02-03"‌}

But when it actually gets to the database, none of the fields from the form are present:

{
   "_id": "588f251bff96fa0004e0c2cd",
   "__v": 0,
   "updated_at": "2017-01-30T11:35:55.567Z"
}"

Also, the array still comes back-I can see it with console.log(), but my ngFor no longer initiates components.

There are no errors.

What should I check?

回答1:

Got it!

The first issue was properly subscribing to the observable.

ngOnInit() {
    this.appListService.getAppList()
    .subscribe(res => this.courses = res);
}

The App List Service is just acting as a manager in this case, so it is just returning an observable:

constructor(private storage:CoursesService) { }
getAppList() {
  return this.storage.get();
}

The Courses Service makes the GET request to the backend:

get(): Observable<Course[]> {
    return this.http.get(this.BaseUrl)
                    .map((res:Response) => res.json())
                    .catch(this.handleError);
                    }

When the resulting observable gets passed up to the main component, the ngFor works fine.

Now, for the POST. First of all, I had to JSON.stringify() the body, like this:

post(course: Course): Observable<Course[]> {
    let courseString = JSON.stringify(course);
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    return this.http.post(this.BaseUrl, courseString, options)
                .map((res:Response) => res.json())
                .catch(this.handleError);
    }

Then, I went on the back end and adjusted the POST so that instead of replying with a success message, it replied with the results of a general GET request.

Now, everything works fine (except for all the work that remains to do, of course.)

来源：https://stackoverflow.com/questions/41935722/angular-2-ngfor-and-form-submit-ceased-working-when-moved-to-observables

标签

javascript

angular

rxjs

angular2-observables