Question

我正在从我的angular 6代码中调用WCF服务，并且返回的数据是JSON。但是当我接受返回的数据时，它会抛出一些错误，例如：

找不到其他支持对象'[{“ Company_Prefix”：“ SCL”，“ Company_Name”：“ Smart Chip Private Limited”，“ Company_Code”：“ SCL”}，{“ Company_Prefix”：“ SYS”，“ Company_Name”：“ Syscom Corporation Private Limited”，“ Company_Code”：“ SYS”}，{“ Company_Prefix”：“ V-SCL”，“ Company_Name”：“ Vihaan Infrasystems India Limited”，“ Company_Code”：“ V-SCL” }，{“ Company_Prefix”：“ OT”，“ Company_Name”：“ OT Morpho”，“ Company_Code”：“ OT”}]]'类型为'string'。 NgFor仅支持绑定到Iterables，例如数组。

我尝试过MAP，但没有帮助。

TS文件：

import { CompanyModel } from './../Models/app.CompanyModel';
import { CommonService } from './../../Shared/Common.service';
import { Component, OnInit } from '@angular/core';
import { CreateEmployeeModel } from '../Models/app.create-EmployeeModel';

@Component({
  selector: 'app-create-employee',
  templateUrl: './create-employee.component.html',
  styleUrls: ['./create-employee.component.css',
  '../../Content/vendor/bootstrap/css/bootstrap.min.css']
})
export class CreateEmployeeComponent implements OnInit {

  private _employeeModel : CreateEmployeeModel;
  UserName:string = sessionStorage.getItem('UserName');
  companies: CompanyModel[];
  departments: string[];
  errorMessage: any;

  constructor(private _CommonService:CommonService) {  }

  ngOnInit(): void {
    debugger;
    this._employeeModel = new CreateEmployeeModel();
    this._employeeModel.UserName=this.UserName;

    this._CommonService.BindCompany(this._employeeModel)
    .subscribe(data => 
      {
        debugger;
        this.companies=data;
      },
      error => this.errorMessage = <any>error);

    // this._CommonService.BindDepartment(this._employeeModel).subscribe(data=>this.departments=data);
  }

**Service:**
import { CompanyModel } from './../HR/Models/app.CompanyModel';
import { CreateEmployeeModel } from './../HR/Models/app.create-EmployeeModel';
import { Injectable } from '@angular/core';
import { Observable, throwError } from 'rxjs';
import { catchError, tap, map } from 'rxjs/operators';
import { HttpClient, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class CommonService {
  private _parse;
  private _response;
  private data: any;
  constructor(private _http: HttpClient, private _Route: Router) {  }

  private api='http://localhost:10704/CommonService.svc';

  BindCompany(EmployeeModel: CreateEmployeeModel): Observable<CompanyModel[]>
  {
    let headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    debugger;
    return this._http.get<CompanyModel[]>( this.api+'/BindCompany/' + EmployeeModel.UserName, { headers: headers } )
    .pipe(tap(data=>{
      debugger;
      // this._parse=JSON.parse(data);
      console.log(data);
        if(data!=null)
        {
          return (data);
        }
        else
        {
          return null;
        }
    }),
    catchError(this.handleError)
    );
  }

`````````````````````````````````````````````````````````````````````````

**JSON DATA THAT API RETURNS:**
`````````````````````````````````````````````````````````````````````````
[{"Company_Prefix":"XXX",
"Company_Name":"XXX Private Limited",
"Company_Code":"XXX"},
{"Company_Prefix":"XXX",
"Company_Name":"XXX Corporation Private Limited",
"Company_Code":"XXX"},
{"Company_Prefix":"V-XXX",
"Company_Name":"XXX Infrasystems India Limited",
"Company_Code":"V-XXX"},
{"Company_Prefix":"XXX",
"Company_Name":"OT XXX",
"Company_Code":"XXX"}]

Answer 1

似乎您没有解析响应。参照下面的代码，修改您的服务。

return this._http.get<CompanyModel[]>( this.api+'/BindCompany/' + EmployeeModel.UserName, { headers: headers } )
.pipe(tap(data=>{
    if(data!=null)
    {
      return JSON.parse(data);
    }
    else
    {
      return null;
    }
}),
catchError(this.handleError)
);

无法将下拉菜单的选项设置为api所返回的json格式的字段

1 个答案: