Угловая модель 2 в html (используя http post)

Question

В настоящее время я изучаю Angular 2, и у меня есть проблема с отправкой модели в мой back-end.

Это как функция выглядит:

addDepartment(department: Department){ 
     var headers = new Headers(); 
     headers["Access-Control-Allow-Origin"] = "http://localhost:65402"; 
     headers.append('Content-Type', 'application/json'); 

    return this.http.post('http://localhost:65402/company/api/department'+ "/", JSON.stringify(department)) 
     .subscribe(res => { 
      this.departments = res.json(); 
     }); 

и это HTML:

<div [hidden]="!showAddView" align="center"> 

    <div> 
     <label for="editTitle">Department No:</label><br> 
     <input #departmentNo placeholder="id"> 
    </div> 
    <div> 
     <label for="editAbrv">Department name:</label><br> 
     <input #departmentName placeholder="name"> 
    </div> 
    <div> 
     <label for="editAbrv">Department Location:</label><br> 
     <input #departmentLocation placeholder="location"> 
    </div> 

    <div> 
     <a href="javascript:void(0);" (click)="addDepartment(department)" title="Add"> 
      Save 
     </a> 
     <a href="javascript:void(0);" (click)=showHide() > 
      Cancel 
     </a> 
    </div> 
</div> 

Полный код здесь: plunker

Я не знаю, как отправить это целое модель в заднюю панель. В нем указано, что department = undefined в моем методе addDepartment. Спасибо за помощь!

Answer 1

Есть несколько проблем, с вашим кодом:

• Вы звонящих (click)="addDepartment(department)" и это department не существует нигде. Вы можете изменить DIV оборачивать свои входы form и получить значения из него:

  <form #f="ngForm" [hidden]="!showAddView" align="center"> 
      .... 
      <a href="javascript:void(0);" (click)="addDepartment(f.value)" title="Add"> 
      .... 
  </form> 
  

• Вы не используете Headers вы создали. Добавьте их к post() запросу:

  this.http.post('~', JSON.stringify(department), { headers: headers })` 
  

• Кроме того, вы, вероятно, не нужно "Access-Control-Allow-Origin", те должны быть на вашем сервере.

Answer 2

Я не знаю, откуда взялся ваш departement. Я бы реорганизовать код использовать ngModel, как описано ниже:

<div [hidden]="!showAddView" align="center"> 
    <div> 
    <label for="editTitle">Department No:</label><br> 
    <input [(ngModel)]="departement.departmentNo" placeholder="id"> 
    </div> 
    <div> 
    <label for="editAbrv">Department name:</label><br> 
    <input [(ngModel)]="departement.departmentName" placehlder="name"> 
    </div> 
    <div> 
    <label for="editAbrv">Department Location:</label><br> 
    <input [(ngModel)]="departement.departmentLocation" placeholder="location"> 
    </div> 

    <div> 
    <a href="javascript:void(0);" (click)="addDepartment(department)" title="Add"> 
     Save 
    </a> 
    <a href="javascript:void(0);" (click)=showHide() > 
     Cancel 
    </a> 
    </div> 
</div> 

Вы должны инициализировать это свойство с пустым объектом:

contructor() { 
    this.department = {}; 
} 

Что касается заголовков, нет ничего, чтобы послать за CORS. Браузер автоматически отправит заголовок Origin, содержащий домен приложения, выполняющего запрос. Сервер обнаружит его и, если он поддерживает CORS, отправит обратно соответствующие заголовки (включая Access-Control-Allow-Origin). Эта ссылка может дать намеки о CORS:

• Понимание и использование CORS - http://restlet.com/blog/2015/12/15/understanding-and-using-cors/

Как подчеркивается Saxsa, Вы забыли использовать headers в ваш запрос ...