无法让下拉列表绑定到从我的服务返回的数组
Can't get dropdownlist to bind to an array being returned from my service
我有一个包含获取员工列表的方法的服务:
export class EmployeeService {
private employeesUrl = 'http://localhost:portnum/api/employees';
getEmployees(): Observable<IEmployee[]> {
return this.http.get<IEmployee[]>(this.employeesUrl).catch(this.errorHandler);
}
}
在我的组件中,我有这个片段,它从我的服务中获取员工列表:
employees = [];
constructor(private fb: FormBuilder, private _employeeService: EmployeeService) {
this.transactionForm = fb.group ({
'employee': [null, Validators.required]
});
}
ngOnInit() {
this._employeeService.getEmployees().subscribe(data => this.employees = data, error => this.errorMsg = error);
}
在我的 html 代码中,我有一个绑定到员工列表的下拉列表:
<span style="padding-right:60px;">{{'Employee' | translate}}*
<select [ngModel]="null" formControlName="employee" [ngClass]="displayErrors ? 'inputRedBorder': 'input'" required >
<option value="null" disabled selected>{{'SelectEmployee' | translate}}</option>
<option *ngFor="let employee of employees">{{employee}}</option>
</select>
<p class="error-msg" *ngIf="displayErrors" name="errorMsg">
{{'RequiredField' | translate}}</p>
</span>
但是,我没有看到显示所有返回员工的下拉列表,而是收到此错误:
ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
at DefaultIterableDiffer.webpackJsonp../node_modules/@angular/core/esm5/core.js.DefaultIterableDiffer.diff (core.js:7495)
at NgForOf.webpackJsonp../node_modules/@angular/common/esm5/common.js.NgForOf.ngDoCheck (common.js:2583)
at checkAndUpdateDirectiveInline (core.js:12368)
at checkAndUpdateNodeInline (core.js:13889)
at checkAndUpdateNode (core.js:13832)
at debugCheckAndUpdateNode (core.js:14725)
at debugCheckDirectivesFn (core.js:14666)
at Object.eval [as updateDirectives] (TransactionPortalComponent.html:23)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14651)
at checkAndUpdateView (core.js:13798)
该对象是一个数组,所以我不确定为什么它说只允许数组和可迭代对象。我在上面做错了什么?
编辑:
api 的响应应如下所示:
{
_employeeList :
[{
_employeeKey : ""employee1""
},
{
_employeeKey : ""employee2""
}],
_errorDetails :
{
_message : ""successful"",
_status : 200
}
}
但我只返回 [] 数组。
会不会跟我的界面有关? :
export interface IEmployee {
employee: string;
}
在您的构造函数中,您已将您的服务作为 _employeeService 注入,但在您的 ngOnInit() 方法中,您正在调用 this._transactionService.getEmployees()。应该是 this._employeeService.getEmployees().
我认为您执行循环的方式是错误的,因为您希望每个员工都有一个标签 <option>
。
此外,由于您的数组可能为空,您可以先检查数组是否包含数据。也许你可以考虑使用 <ng-template>
和 ng-container
.
根据您 api 的回复,您必须进行以下更改:
服务
api 返回一个 JSON 而不是一个数组
getEmployees(): Observable<any> {
return this.http.get<any>(this.employeesUrl).catch(this.errorHandler);
}
组件
获取数组
ngOnInit() {
this._employeeService.getEmployees().subscribe(data => this.employees = data._employeeList, error => this.errorMsg = error);
}
模板
由于您不想显示对象本身而是它的值,您可以执行以下操作:
<ng-container *ngIf="employees?.length>0">
<ng-template ngFor let-employee [ngForOf]="employees">
<option>{{employee._employeeKey}}</option>
</ng-template>
</div>
我有一个包含获取员工列表的方法的服务:
export class EmployeeService {
private employeesUrl = 'http://localhost:portnum/api/employees';
getEmployees(): Observable<IEmployee[]> {
return this.http.get<IEmployee[]>(this.employeesUrl).catch(this.errorHandler);
}
}
在我的组件中,我有这个片段,它从我的服务中获取员工列表:
employees = [];
constructor(private fb: FormBuilder, private _employeeService: EmployeeService) {
this.transactionForm = fb.group ({
'employee': [null, Validators.required]
});
}
ngOnInit() {
this._employeeService.getEmployees().subscribe(data => this.employees = data, error => this.errorMsg = error);
}
在我的 html 代码中,我有一个绑定到员工列表的下拉列表:
<span style="padding-right:60px;">{{'Employee' | translate}}*
<select [ngModel]="null" formControlName="employee" [ngClass]="displayErrors ? 'inputRedBorder': 'input'" required >
<option value="null" disabled selected>{{'SelectEmployee' | translate}}</option>
<option *ngFor="let employee of employees">{{employee}}</option>
</select>
<p class="error-msg" *ngIf="displayErrors" name="errorMsg">
{{'RequiredField' | translate}}</p>
</span>
但是,我没有看到显示所有返回员工的下拉列表,而是收到此错误:
ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
at DefaultIterableDiffer.webpackJsonp../node_modules/@angular/core/esm5/core.js.DefaultIterableDiffer.diff (core.js:7495)
at NgForOf.webpackJsonp../node_modules/@angular/common/esm5/common.js.NgForOf.ngDoCheck (common.js:2583)
at checkAndUpdateDirectiveInline (core.js:12368)
at checkAndUpdateNodeInline (core.js:13889)
at checkAndUpdateNode (core.js:13832)
at debugCheckAndUpdateNode (core.js:14725)
at debugCheckDirectivesFn (core.js:14666)
at Object.eval [as updateDirectives] (TransactionPortalComponent.html:23)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14651)
at checkAndUpdateView (core.js:13798)
该对象是一个数组,所以我不确定为什么它说只允许数组和可迭代对象。我在上面做错了什么?
编辑:
api 的响应应如下所示:
{
_employeeList :
[{
_employeeKey : ""employee1""
},
{
_employeeKey : ""employee2""
}],
_errorDetails :
{
_message : ""successful"",
_status : 200
}
}
但我只返回 [] 数组。
会不会跟我的界面有关? :
export interface IEmployee {
employee: string;
}
在您的构造函数中,您已将您的服务作为 _employeeService 注入,但在您的 ngOnInit() 方法中,您正在调用 this._transactionService.getEmployees()。应该是 this._employeeService.getEmployees().
我认为您执行循环的方式是错误的,因为您希望每个员工都有一个标签 <option>
。
此外,由于您的数组可能为空,您可以先检查数组是否包含数据。也许你可以考虑使用 <ng-template>
和 ng-container
.
根据您 api 的回复,您必须进行以下更改:
服务
api 返回一个 JSON 而不是一个数组
getEmployees(): Observable<any> {
return this.http.get<any>(this.employeesUrl).catch(this.errorHandler);
}
组件
获取数组
ngOnInit() {
this._employeeService.getEmployees().subscribe(data => this.employees = data._employeeList, error => this.errorMsg = error);
}
模板
由于您不想显示对象本身而是它的值,您可以执行以下操作:
<ng-container *ngIf="employees?.length>0">
<ng-template ngFor let-employee [ngForOf]="employees">
<option>{{employee._employeeKey}}</option>
</ng-template>
</div>