我正在尝试将api响应绑定到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代码在
之下 <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>
角度分量代码如下
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服务代码在
之下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;
}
}
当我调用web api post方法时，会调用2个方法，一个是OPTIONS，另一个是post方法。 在调试时，我开始知道数据绑定到组件属性this.seatsData正在调用OPTION方法，其响应为空。我们默认调用OPTION，我们启用CORS。 所以，我无法绑定数据并低于错误，
theator.component.html：2错误TypeError：无法读取属性 ＆＃39; SeatRows＆＃39;未定义的 在Object.eval [as updateDirectives]（theator.component.html：2） at Object.debugUpdateDirectives [as updateDirectives]（services.ts:273） 在checkAndUpdateView（view.ts：345） 在callViewAction（view.ts：700） 在execComponentViewsAction（view.ts：644） 在checkAndUpdateView（view.ts：392） 在callViewAction（view.ts：700） 在execComponentViewsAction（view.ts：644） 在checkAndUpdateView（view.ts：392） 在callWithDebugContext（services.ts：645）
答案 0 :(得分：1)