Не удается найти другой поддерживающий объект '[object Object]' типа 'object'.Только для поддержки - PullRequest
Новая
       9

Не удается найти другой поддерживающий объект '[object Object]' типа 'object'.Только для поддержки

1 голос
/ 26 апреля 2019

Я собираюсь получить объект, подобный следующему: 

<PersonalInformationList xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.datacontract.org/2004/07/TelephoneWebApi.Models">
         <BankNameSelectListItems>
             <DistinctBankNameModel>
               <EmployeeBankName>BOI</EmployeeBankName>
               <EmployeeBankNameID>BOI</EmployeeBankNameID>
             </DistinctBankNameModel>
             <DistinctBankNameModel>
               <EmployeeBankName>SBH</EmployeeBankName>
               <EmployeeBankNameID>SBH</EmployeeBankNameID>
             </DistinctBankNameModel>
        </BankNameSelectListItems>
      <PersonalInformationModel>
        <PersonalInformationModel>
          <BankName>BOI</BankName>
          <BroadBandNumber>2234682</BroadBandNumber>
          <BroadBandServiceName>bsnl</BroadBandServiceName>
          <EmployeeCode>1116</EmployeeCode>
          <EmployeeDesignation>SCIENTIST 'E'</EmployeeDesignation>
          <EmployeeName>B Rama Krishna Reddy</EmployeeName>
          <PBpay>51910</PBpay>
          <Status>false</Status>
          <bloodgrp>A-</bloodgrp>
          <category>N</category>
          <dob>01-07-1958 00:00:00</dob>
          <fname>B Pulla Reddy(Late)</fname>
          <married>M</married>
          <sex>M</sex>
        </PersonalInformationModel>
       </PersonalInformationModel>
</PersonalInformationList>

и вот мой интерфейс 

export interface IEmployeePersonalInformation {
    EmployeeCode: string;
    EmployeeName: string;
    EmployeeDesignation: string;
    EmployeeOffice: string;
    LandlineServiceNmae: string;
    LandlineNumber: string;
    BroadBandServiceName: string;
    BroadBandNumber: string;
    MobileServiceName: string;
    MobileNumber: string;
    BankName: string;
    category: string;
    scalecd: string;
    PBpay: string;
    posting_at: string;
    dob: string;
    married: string;
    nationality: string;
    sex: string;
    fname: string;
    mname: string;
    bloodgrp: string;
    PAN: string;
    paddr: string;
    email: string;
    AccountNumber: string;
}
export interface IPersonalInformationList {

    EmployeePersonalInformationList: EmployeePersonalInformation;
    BankNamesInfoList: BankNamesInformationList;
}

export class PersonalInfoList implements IPersonalInformationList {
    constructor(public EmployeePersonalInformationList: EmployeePersonalInformation,
        public BankNamesInfoList: BankNamesInformationList) { }
}

export interface IBankNamesList {
    Text: string;
    Value: string;
}
export class BankNamesInformationList implements IBankNamesList {
    constructor(public Text: string,
        public Value: string) { }
}

export class EmployeePersonalInformation implements IEmployeePersonalInformation {

    constructor(public EmployeeCode: string,
        public EmployeeName: string,
        public EmployeeDesignation: string,
        public EmployeeOffice: string,
        public LandlineServiceNmae: string,
        public LandlineNumber: string,
        public BroadBandServiceName: string,
        public BroadBandNumber: string,
        public MobileServiceName: string,
        public MobileNumber: string,
        public BankName: string,
        public category: string,
        public scalecd: string,
        public PBpay: string,
        public posting_at: string,
        public dob: string,
        public married: string,
        public nationality: string,
        public sex: string,
        public fname: string,
        public mname: string,
        public bloodgrp: string,
        public PAN: string,
        public paddr: string,
        public email: string,
        public AccountNumber: string) {
    }

}

service 

export class EmployeeService {

    constructor(private _http: Http) { }

      getEmployees(): Observable<IPersonalInformationList> {
        return this._http.get("http://localhost:4185/api/PersonalInformation/1116")
            .map((response: Response) => <IPersonalInformationList>response.json())
    }


}

component.ts

import { Component, Input, OnInit } from '@angular/core';
import { IPersonalInformationList } from './PersonalInforamtion';
import { EmployeeService } from './PersonalInformationService';

@Component({
    selector: 'list-employee',
    templateUrl: 'app/PersonalInformation/PersonalInformation.component.html',
    styleUrls:['app/PersonalInformation/PersonalInformation.css'],
    providers: [EmployeeService]
})
export class EmployeeListComponent implements OnInit {
    employees: IPersonalInformationList;
     constructor(private _employeeService: EmployeeService) { }
    ngOnInit() {
        this._employeeService.getEmployees()
            .subscribe((employeeData) => this.employees = employeeData);

    }

}

html code 

<div >
    <div layout-align="center center">
        <h2>Employee Information</h2>
        </div>
        <table id="tblEnquire1" class="table table-hover table-bordered table-striped table-responsive" border="1">
            <thead style="background-color:#0E8494;">
                <tr>
                    <th class="text-center" style="color:white;"></th>
                    <th class="text-center" style="color:white;"></th>
                    <th class="text-center" style="color:white;"></th>
                    <th class="text-center" style="color:white;"></th>
                    <th class="text-center" style="color:white;"></th>
                    <th class="text-center" style="color:white;"></th>
                    <th class="text-center" style="color:white;"></th>
                    <th class="text-center" style="color:white;"></th>

                </tr>
            </thead>
            <tbody>
                <ng-container *ngFor="let employee of employees;">
                    <tr>
                        <td><label class="InformationTextColor font-weight-lighter"> Code:</label></td>
                        <td><input type="text" class="form-control font-weight-lighter" disabled="disabled" value="{{employee.PersonalInformationModel.EmployeeCode }}" /> </td>
                        <td><label class="InformationTextColor font-weight-lighter"> Name:</label></td>
                        <td><input type="text" class="form-control font-weight-lighter" value="{{employee.PersonalInformationModel.EmployeeName  }}" /></td>
                        <td><label class="InformationTextColor font-weight-lighter">Designation:</label></td>
                        <td><input type="text" class="form-control font-weight-lighter" value="{{employee.PersonalInformationModel.EmployeeDesignation}}" /></td>
                        <td><label class="InformationTextColor font-weight-lighter">Office Name:</label></td>
                        <td><input type="text" class="form-control font-weight-lighter" value="{{employee.PersonalInformationModel.EmployeeOffice}}" /></td>

                    </tr>
                    <tr>
                        <td><label class="InformationTextColor font-weight-lighter">category:</label></td>
                        <td><input type="text" class="form-control font-weight-lighter" value="{{employee.PersonalInformationModel.category }}" /></td>
                        <td><label class="InformationTextColor font-weight-lighter"> Blood Group:</label></td>
                        <td><input type="text" class="form-control font-weight-lighter" value="{{employee.PersonalInformationModel.bloodgrp  }}" /></td>
                        <td><label class="InformationTextColor font-weight-lighter">PAN:</label></td>
                        <td><input type="text" class="form-control font-weight-lighter" value="{{employee.PersonalInformationModel.PAN}}" /></td>
                        <td><label class="InformationTextColor font-weight-lighter">Gender:</label></td>
                        <td><input type="text" class="form-control font-weight-lighter" value="{{employee.PersonalInformationModel.sex}}" /></td>

                    </tr>
                    <tr>
                        <td><label class="InformationTextColor font-weight-lighter">LandLine Provider:</label></td>
                        <td><input type="text" class="form-control font-weight-lighter" value="{{employee.PersonalInformationModel.LandlineServiceName }}" /></td>
                        <td><label class="InformationTextColor font-weight-lighter">LandLine Number:</label></td>
                        <td><input type="text" class="form-control font-weight-lighter" value="{{employee.PersonalInformationModel.LandlineNumber  }}" /></td>
                        <td><label class="InformationTextColor font-weight-lighter">BroadBand Provider:</label></td>
                        <td><input type="text" class="form-control font-weight-lighter" value="{{employee.PersonalInformationModel.BroadBandServiceName}}" /></td>
                        <td><label class="InformationTextColor font-weight-lighter">BroadBand Number:</label></td>
                        <td><input type="text" class="form-control font-weight-lighter" value="{{employee.PersonalInformationModel.BroadBandNumber}}" /></td>
                    </tr>
                    <tr>
                        <td><label class="InformationTextColor font-weight-lighter">Mobile Provider:</label></td>
                        <td><input type="text" class="form-control font-weight-lighter" value="{{employee.PersonalInformationModel.MobileServiceName }}" /></td>
                        <td><label class="InformationTextColor font-weight-lighter">Mobile Number:</label></td>
                        <td><input type="text" class="form-control font-weight-lighter" value="{{employee.PersonalInformationModel.MobileNumber  }}" /></td>
                        <td><label class="InformationTextColor font-weight-lighter">BroadBand Provider:</label></td>
                        <td><input type="text" class="form-control font-weight-lighter" value="{{employee.PersonalInformationModel.BroadBandServiceName}}" /></td>
                        <td><label class="InformationTextColor font-weight-lighter">BroadBand:</label></td>
                        <td><input type="text" class="form-control font-weight-lighter" value="{{employee.PersonalInformationModel.BroadBandNumber}}" /></td>
                    </tr>
                </ng-container>
                <!--If the web service takes time to return data, the message in this <tr>
                is displayed. When the service call returns this message disappears
                and the employees data is displayed-->
                <tr *ngIf="!employees">
                    <td colspan="5">
                        Loading data. Please wait...
                    </td>
                </tr>
                <!--This message is displayed if the web services does not return any data-->
                <tr *ngIf="employees && employees.length==0">
                    <td colspan="5">
                        No employee records to display
                    </td>
                </tr>
            </tbody>
        </table>



    </div>

Невозможно найти другой поддерживающий объект '[object Object]' типа 'object'.NgFor поддерживает только привязку к итерациям, таким как массивы.получить эту ошибку при загрузке страницы

Может кто-нибудь предложить мне, что так

1 Ответ

1 голос
/ 26 апреля 2019

Вы пытаетесь использовать *ngFor для итерации по объекту, который предназначен для массива, я бы изменил следующее на. (Угловой v6.1 и выше) 

<ng-container *ngFor="let employee of employees | keyvalue">

Это должно позволить вам перебирать объект, обращающийся к 

{{ employee.key }}: {{ employee.value }}

Вот документация Angular // Вот демонстрация Working

...