我将收到如下对象：
<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) {
}
}
服务
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代码
<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>
找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到Iterables，例如数组。页面加载时出现此错误
有人可以建议我怎么做
答案 0 :(得分：1)
您正尝试使用*ngFor遍历对象（该对象旨在用于数组），因此我将以下内容更改为。 （Angular v6.1及更高版本）
<ng-container *ngFor="let employee of employees | keyvalue">
这应该允许您遍历对象访问
{{ employee.key }}: {{ employee.value }}
这里是Angular documentation //这里是Working Demo