Как добавить объект в существующий объект в таблице (Angular 2)

Question

Empolyee class ...

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?или я что-то не понял?Моя цель - добавить новый empolyee в передней части таблицы и отобразить его.Почему-то я не могу понять, почему выдается ошибка.

Вот пример ответа, возвращаемого при вызове 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[];
ngOnInit() {
     this.serviceA.getEmpolyee().subscribe( 
           data => this.emp = data.employee );
}

addNew(newEmp) {
    this.emp.unshift(newEmp);
}

Answer 2

Видимо, ваш сервис возвращает только один Empolyee (разве это не ошибочно написано?).

Так что попробуйте сделать это:

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

Это действительно базовый Angular,так что вы, вероятно, должны где-то пройти учебник / курс (официальный учебник довольно солидный).

Answer 3

Сначала вам нужно изменить переменную в контроллере с

emp: Empolyee;

на

emp: Array<Empolyee>;

На основе представленной вами модели JSON вам может потребоваться сделать следующее в ngOnInit :

data => emp = data.empolyee;

И в addNew функция, поэтому вы будете использовать функцию массива unshift :

this.emp.unshift(newEmp);

Ссылка на дополнительный полный пример: Код сотрудника