Html 使用CORS post请求从angular 2调用web api2

我试图将下面的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 { 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;

    }
}

{{seatRow？.SeatRowNumber}}o
{{seat？.SeatRowNo}{{seat？.SeatColumnNo}{{seat？.IsAvailable}}

角度分量代码如下所示

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/core'导入{Component，OnInit}
从“/ISeat”导入{ISeat}；
从“/theator.service”导入{TheatorService}；
@组成部分({
选择器：“theator”，
templateUrl:“./theator.component.html”
})
导出类TheatorComponent实现OnInit{
seatAggregateData：任何[]；
座位数据：任何；
错误消息：字符串；
构造函数（专用theatorService:theatorService）{
}
恩戈尼尼特（）{
这个.getScreenDeAttails（）；
}
公共GetScreenDeatails（）
{
this.theatorService.getScreenDetailsService（101）.subscribe（s=>this.seatsData=s.ScreenData，e=>this.errorMessage=e）；
}
public AddData（seatData:ISeat，event:any）{
if（event.target.checked）{
this.seatAggregateData.push（seatData）
}
否则{
var index=this.seatAggregateData.indexOf（seatData）；
这个.seatAggregateData.splice（索引，1）；
}
}
}

角度服务代码如下

     <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 { 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;

    }
}

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http，Headers，Response}；
从“rxjs/Observable”导入{Observable}；
导入'rxjs/add/operator/map'；
导入“rxjs/add/operator/catch”；
@可注射（）
出口级影院服务{
getScreenDetailsUrl:string='1〕http://localhost:17046/api/Theator/GetScreenDetailsInfo'
构造函数（专用http:http）{
}
getScreenDetailsService（screenNumber:number）：可观察{
var headers=新的headers（）；
append（'Content-Type'，'application/json；charset=utf-8'）；
让bodyString=JSON.stringify（屏幕编号）；//stringify有效负载
返回this.http.post（this.getScreenDetailsUrl，bodyString，{headers:headers}）
.map（（res:Response）=>res.json（））/…并对响应调用.json（）以返回数据
.catch（（error:any）=>Observable.throw（error.json（）.error | | |'Server error'））；/…如果有错误；
}
}

当我调用WebAPI post方法时，会调用两个方法：一个是选项，另一个是post方法。 在调试过程中，我了解到当调用响应为空的OPTION方法时，会发生与组件属性this.seatsData的数据绑定。默认情况下，如果启用CORS，将调用该选项。 因此，我无法绑定数据并获得以下错误

theator.component.html:2错误类型错误：无法读取属性 未定义的“SeatRows” 在Object.eval[作为updateDirectives]（theator.component.html:2） 在Object.debugUpdateDirectives[作为updateDirectives]（services.ts:273） 在checkAndUpdateView（view.ts:345） 在调用视图操作时（视图ts:700） 在执行组件视图操作时（view.ts:644） 在checkAndUpdateView（view.ts:392） 在调用视图操作时（视图ts:700） 在执行组件视图操作时（view.ts:644） 在checkAndUpdateView（view.ts:392） at callWithDebugContext（services.ts:645）

---

这会解决你的问题

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

---

尝试使用

Angular从不从选项请求获取响应，而Angular只从POST请求获取响应。浏览器以透明方式发出选项请求。问题的原因在其他地方。我想您只需要

*ngFor=“let seatRow of seatsData？”SeatRows“

（添加了

？

）的可能副本您是否使用Fiddler/swagger检查Web API的请求和响应？