角度4更新嵌套字段

Question

無法使用@angular/http method http.put()更新我的模型。

問題是我根本無法更新位置。我可以成功更新任何其他字段，並可以在使用POST創建時設置任何位置。

我的角度版本 「^ 4.3.3」

在java中我的模型看起來像

public class Employee { 

    @Id 
    @GeneratedValue(strategy = GenerationType.AUTO) 
    Long id; 

    String name; 

    String email; 

    String phone; 

    Date birthDay; 

    @JsonBackReference 
    @ManyToOne(fetch = FetchType.EAGER) 
    @JoinColumn(name = "position_id") 
    Position position; 
} 

投影：

public interface EmployeeProjection { 

    Long getId(); 

    String getName(); 

    String getEmail(); 

    String getPhone(); 

    Date getBirthDay(); 

    @Value("#{target.position.name}") 
    String getPosition(); 
} 

與地位等級：

public class Position { 

    @Id 
    @GeneratedValue(strategy = GenerationType.AUTO) 
    Long id; 

    String name; 
} 

在角模板中e放置：

<md-select mdInput placeholder="Position" 
      [(ngModel)]="newEmployee.position"> 
    <md-option *ngFor="let position of positions | async" [value]="position.name">{{ position.name }} 
    </md-option> 
</md-select> 

我的組件更新方法：

update() { 
    let positionName = this.employee.position; 
    this.positionService.findByName(positionName).subscribe(position => { 
     this.employee.position = position._links.self.href; 
     this.employeeService.update(this.employee); 
     this.employee.position = positionName; 
     this.employeeService.localStorageService.set('employee', this.employee); 
    }); 
    } 

而且在服務：

update(employee: Employee) { 
    this.http.put(employee._links.self.href, employee) 
     .map((resp: Response) => resp.json()) 
     .subscribe(() => { 
     this.getAll(); 
     }); 
    return employee; 
    } 

在Chrome請求：

{ 
    "name": "Nikolai Morgan", 
    "id": 1, 
    "position": "http://localhost:9080/api/positions/5", 
    "birthDay": "1986-07-01", 
    "email": "NikolaiMorgan@gmail.com", 
    "phone": "+380840713229", 
    "_links": { 
    "self": { 
     "href": "http://localhost:9080/api/employees/1" 
    }, 
    "employee": { 
     "href": "http://localhost:9080/api/employees/1{?projection}", 
     "templated": true 
    }, 
    "position": { 
     "href": "http://localhost:9080/api/employees/1/position" 
    } 
    } 
} 

但響應和預覽不包含字段位置：

{ 
    "id" : 1, 
    "name" : "Nikolai Morgan", 
    "email" : "NikolaiMorgan@gmail.com", 
    "phone" : "+380840713229", 
    "birthDay" : "1986-07-01", 
    "_links" : { 
    "self" : { 
     "href" : "http://localhost:9080/api/employees/1" 
    }, 
    "employee" : { 
     "href" : "http://localhost:9080/api/employees/1{?projection}", 
     "templated" : true 
    }, 
    "position" : { 
     "href" : "http://localhost:9080/api/employees/1/position" 
    } 
    } 
} 

Answer 1

要更新引用另一個實體的實體，在Spring Data REST中，您必須使用指向此實體的鏈接。例如：

@Entity 
class Employee { 
    //... 

    String name; 

    @ManyToOne 
    Position position; 

    //... 
} 

@Entity 
class Position { 
    //... 

    String name; 

    //... 
} 

interface EmployeeRepo extends JpaRepository<Employee, Long> {} 
interface PositionRepo extends JpaRepository<Position, Long> {} 

首先，我們添加一個位置：

POST http://localhost:9080/api/positions

{ 
    "name": "position1" 
} 

而得到這樣的迴應：

{ 
    "name": "position1", 
    "_links" : { 
     "self" : { 
      "href" : "http://localhost:9080/api/positions/1" 
     }, 
     "position" : { 
      "href" : "http://localhost:9080/api/positions/1" 
     } 
    } 
} 

然後添加僱員：

POST http://localhost:9080/api/employees

{ 
    "name": "employee1", 
    "employee": "http://localhost:9080/api/positions/1" 
} 

然後得到迴應：

{ 
    "name" : "employee1", 
    "_links" : { 
    "self" : { 
     "href" : "http://localhost:9080/api/employees/1" 
    }, 
    "employee" : { 
     "href" : "http://localhost:9080/api/employees/1", 
    }, 
    "position" : { 
     "href" : "http://localhost:9080/api/employees/1/position" 
    } 
    } 
} 

因此，如果我們需要更新我們創建了一個新的位置，然後把員工：

PUT http://localhost:9080/api/employees/1

{ 
    "name": "employee1", 
    "position": "http://localhost:9080/api/positions/2" 
} 

甚至補丁：

PATCH http://localhost:9080/api/employees/1

{ 
    "position": "http://localhost:9080/api/positions/2" 
}