Calling web api2 from angular 2 with CORS post request

Question

I am trying to bind below api response to html,

   {
  "ScreenData": {
    "ScreeNo": 101,
    "MovieName": "Movie101",
    "SeatRows": [
      {
        "SeatRowNumber": 1,
        "Seats": [
          {
            "SeatRowNo": 1,
            "SeatColumnNo": 1,
            "Price": 100.0,
            "IsAvailable": true
          }
        ]
      },
      {
        "SeatRowNumber": 1,
        "Seats": [
          {
            "SeatRowNo": 1,
            "SeatColumnNo": 2,
            "Price": 100.0,
            "IsAvailable": true
          }
        ]
      },
      {
        "SeatRowNumber": 1,
        "Seats": [
          {
            "SeatRowNo": 1,
            "SeatColumnNo": 3,
            "Price": 100.0,
            "IsAvailable": true
          }
        ]
      },
      {
        "SeatRowNumber": 1,
        "Seats": [
          {
            "SeatRowNo": 1,
            "SeatColumnNo": 4,
            "Price": 100.0,
            "IsAvailable": true
          }
        ]
      },
      {
        "SeatRowNumber": 1,
        "Seats": [
          {
            "SeatRowNo": 1,
            "SeatColumnNo": 5,
            "Price": 100.0,
            "IsAvailable": true
          }
        ]
      },
      {
        "SeatRowNumber": 2,
        "Seats": [
          {
            "SeatRowNo": 2,
            "SeatColumnNo": 1,
            "Price": 100.0,
            "IsAvailable": true
          }
        ]
      },
      {
        "SeatRowNumber": 2,
        "Seats": [
          {
            "SeatRowNo": 2,
            "SeatColumnNo": 2,
            "Price": 100.0,
            "IsAvailable": true
          }
        ]
      },
      {
        "SeatRowNumber": 2,
        "Seats": [
          {
            "SeatRowNo": 2,
            "SeatColumnNo": 3,
            "Price": 100.0,
            "IsAvailable": true
          }
        ]
      },
      {
        "SeatRowNumber": 2,
        "Seats": [
          {
            "SeatRowNo": 2,
            "SeatColumnNo": 4,
            "Price": 100.0,
            "IsAvailable": true
          }
        ]
      },
      {
        "SeatRowNumber": 2,
        "Seats": [
          {
            "SeatRowNo": 2,
            "SeatColumnNo": 5,
            "Price": 100.0,
            "IsAvailable": true
          }
        ]
      },
      {
        "SeatRowNumber": 3,
        "Seats": [
          {
            "SeatRowNo": 3,
            "SeatColumnNo": 1,
            "Price": 100.0,
            "IsAvailable": true
          }
        ]
      },
      {
        "SeatRowNumber": 3,
        "Seats": [
          {
            "SeatRowNo": 3,
            "SeatColumnNo": 2,
            "Price": 100.0,
            "IsAvailable": true
          }
        ]
      },
      {
        "SeatRowNumber": 3,
        "Seats": [
          {
            "SeatRowNo": 3,
            "SeatColumnNo": 3,
            "Price": 100.0,
            "IsAvailable": true
          }
        ]
      },
      {
        "SeatRowNumber": 3,
        "Seats": [
          {
            "SeatRowNo": 3,
            "SeatColumnNo": 4,
            "Price": 100.0,
            "IsAvailable": true
          }
        ]
      },
      {
        "SeatRowNumber": 3,
        "Seats": [
          {
            "SeatRowNo": 3,
            "SeatColumnNo": 5,
            "Price": 100.0,
            "IsAvailable": true
          }
        ]
      },
      {
        "SeatRowNumber": 4,
        "Seats": [
          {
            "SeatRowNo": 4,
            "SeatColumnNo": 1,
            "Price": 100.0,
            "IsAvailable": true
          }
        ]
      },
      {
        "SeatRowNumber": 4,
        "Seats": [
          {
            "SeatRowNo": 4,
            "SeatColumnNo": 2,
            "Price": 100.0,
            "IsAvailable": true
          }
        ]
      },
      {
        "SeatRowNumber": 4,
        "Seats": [
          {
            "SeatRowNo": 4,
            "SeatColumnNo": 3,
            "Price": 100.0,
            "IsAvailable": true
          }
        ]
      },
      {
        "SeatRowNumber": 4,
        "Seats": [
          {
            "SeatRowNo": 4,
            "SeatColumnNo": 4,
            "Price": 100.0,
            "IsAvailable": true
          }
        ]
      },
      {
        "SeatRowNumber": 4,
        "Seats": [
          {
            "SeatRowNo": 4,
            "SeatColumnNo": 5,
            "Price": 100.0,
            "IsAvailable": true
          }
        ]
      }
    ]
  }
}

Html code is below

     <div *ngFor="let seatRow of seatsData?.SeatRows"style="display: block; height: 50px;">
    <span  style="float: left;margin-right: 40px;margin-left: 20px;">{{seatRow?.SeatRowNumber}}o</span>
    <div *ngFor="let seat of seatRow?.Seats" style="width: 10%; float: left">
      <span> <input type="checkbox"  (change)="AddData(Seat,$event)" [disabled]="!seat?.IsAvailable" [checked]="!seat?.IsAvailable"> {{seat?.SeatRowNo}}{{seat?.SeatColumnNo}}  {{seat?.IsAvailable}} </span>
    </div>
</div>

The angular component code goes as below

import { Component, OnInit } from '@angular/core'
import { ISeat } from './ISeat';
import { TheatorService } from './theator.service';

@Component({
    selector: 'theator',
    templateUrl: './theator.component.html'
})
export class TheatorComponent implements OnInit {
    seatAggregateData: any[];
    seatsData: any ;

    errorMessage: string;
    constructor(private theatorService: TheatorService) {

    }
    ngOnInit() {

            this.GetScreenDeatails();
    }
    public GetScreenDeatails()
    {
        this.theatorService.getScreenDetailsService(101).subscribe(s => this.seatsData = s.ScreenData, e => this.errorMessage = <any>e);

    }
    public AddData(seatData: ISeat, event: any) {
        if (event.target.checked) {
            this.seatAggregateData.push(seatData)
        }
        else {
            var index = this.seatAggregateData.indexOf(seatData);
            this.seatAggregateData.splice(index, 1);
        }
    }

}

Angular service code is below

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class TheatorService {
    getScreenDetailsUrl: string = 'http://localhost:17046/api/Theator/GetScreenDetailsInfo'
    constructor(private http: Http) {

    }
    getScreenDetailsService(screenNumber: number): Observable<any>  {
        var headers = new Headers();
        headers.append('Content-Type', 'application/json; charset=utf-8');
        let bodyString = JSON.stringify(screenNumber); // Stringify payload
        return this.http.post(this.getScreenDetailsUrl,bodyString,  { headers: headers })
            .map((res: Response) => res.json())  // ...and calling .json() on the response to return data
            .catch((error: any) => Observable.throw(error.json().error || 'Server error')); //...errors if any;

    }
}

When I am calling web api post method the 2 methods are getting called one is OPTIONS and another is post method. While debugging I come to know the data binding to component property this.seatsData is happening while OPTION method is called whose response is empty. OPTION is called by default we we enable CORS. So, I am not able to bind data and getting below error,

theator.component.html:2 ERROR TypeError: Cannot read property 'SeatRows' of undefined at Object.eval [as updateDirectives] (theator.component.html:2) at Object.debugUpdateDirectives [as updateDirectives] (services.ts:273) at checkAndUpdateView (view.ts:345) at callViewAction (view.ts:700) at execComponentViewsAction (view.ts:644) at checkAndUpdateView (view.ts:392) at callViewAction (view.ts:700) at execComponentViewsAction (view.ts:644) at checkAndUpdateView (view.ts:392) at callWithDebugContext (services.ts:645)

Answer 1

This should solve you problem.

*ngFor="let seatRow of seatsData?.SeatRows"

Try to use safe navigation operator