Question

我正在使用Angular并试图遍历对象

JSON

employee {"fName":"mike","email":"XXXXXXXX@hotmail.com"}

界面

export interface Employee {
fName:string
email:string

}

组件

    iEmployee: Employee[];
getITIMDATA() {
        this._ersaDet.getITIMData(this.ersaGlobalUID)
            .subscribe(
            data => {
                this.iEmployee = data;
            },
            error => 'GetAllCostCenetrs Method: ');

    }

HTML

 <div *ngFor="let itim of iEmployee">
        <div class="col-lg-12">
            <div class="row">
                <div class="form-group">
                    <label class="control-label">Name</label>
                    <input type="text"  name="Name" class="form-control" id="ntName" [(ngModel)]="itim.fName">
                </div>
            </div>
        </div>
 <div>

执行代码时出现的错误是

找不到类型不同的支持对象“ [object Object]” '宾语'。 NgFor仅支持绑定到数组等Iterable。

Answer 1

好吧，您在订阅中的代码是

data => {
    this.iEmployee = data;
}

data的内容是什么？您可以在分配后打印this.iEmplyoee的值吗？

TypeScript编译器说它不是对象数组。

您可以创建一个简单的工作示例吗？（在Stackblitz，plunkr等上……）

更新

您似乎希望收到一条记录而不是一个数组，因此您可以：

删除ngFor
将订阅中的代码更改为类似

数据=> { this.iEmployee = [数据]; }

顺便说一句，当您尝试将单个对象分配给对象数组时，没有收到来自编译器的错误/警告，这很奇怪。您是否已删除tsconfig文件中的某些文件？

Answer 2

您应该以json而不是单个对象返回数组。即使您只有一个对象，也应该返回一个由单个对象组成的数组。

角度绑定到对象而不是ArrayList

2 个答案: