Блог

Я вызываю службу WCF из моего кода angular 6, и возвращаемые данные находятся в формате 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»}]’ типа ‘строка’. ngFor поддерживает привязку только к повторяющимся объектам, таким как массивы.

Я пробовал 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"}]
  

Кажется, что вы не анализируете ответ. Внесите изменения в свой сервис, ссылаясь на приведенный ниже код.

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