Question

Empolyee类...

class Empolyee
public name: string;
public id: string;
public dep: string;

constructor(name, id, dep) {
   this.name = name;
   this.id = id;
   this.dep = dep;
}

打字稿

emp: Empolyee;
ngOnInit() {
     this.serviceA.getEmpolyee().subscribe( 
          { data => emp = data; });
}

addNew(newEmp) {
    this.emp = newEmp; //this does not work.... 
}

html

<table *ngFor="let person of emp">
    <tr>{{person.name}}</tr>
</table>

尝试此操作时出现错误

ERROR Error: Error trying to diff 'Sam John'. Only arrays and iterables are allowed.

那么，如何将对象附加到emp？还是有我没得到的东西？我的目标是在表的前面添加新的员工并显示它。不知何故我不明白为什么会引发错误。

这是调用getEmpolyee()返回的示例响应返回以下内容...。

  getEmpolyee() {
        return this.httpclient.get<Empolyee>('/getEmployee').map( data => data);
   }

从服务发送回的数据在下面

"empolyee":[
{"name":"Reed Thomas","id":"5729","dep":"Sale"},
{"name":"Green Steve","id":"3268","dep":"IT"}
]

Answer 1

首先，您需要从

更改控制器中的变量。

emp: Empolyee;

到

emp: Array<Empolyee>;

基于您提供的JSON模型，您可能需要在 ngOnInit 中执行以下操作：

data => emp = data.empolyee;

然后在 addNew 函数中，您将使用数组 unshift 函数：

this.emp.unshift(newEmp);

链接到其他完整示例： Employee Angular code

Answer 2

尝试一下：

emp: Empolyee[];
ngOnInit() {
     this.serviceA.getEmpolyee().subscribe( 
           data => this.emp = data.employee );
}

addNew(newEmp) {
    this.emp.unshift(newEmp);
}

Answer 3

显然，您的服务仅返回一个Empolyee（顺便说一句错了吗？）。

所以尝试这样做：

<table>
    <tr><td>{{emp.name}}</td></tr>
</table>

尽管这确实是Angular的基础知识，所以您可能应该在某个地方上一个教程/课程（official tutorial非常扎实）。

如何将对象追加到表（角度2）中的现有对象中

3 个答案: