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)
*ngFor="let seatRow of seatsData?.SeatRows"(added?) - Günter Zöchbauer