У меня есть простой пользовательский компонент, который извлекает имя и фамилию пользователя. Когда пользователь нажимает кнопку отправки, он делает спокойный вызов, извлекает детали и передает обратно моему пользовательскому объекту. Однако в данный момент этого не происходит, и я не уверен, что пошло не так.
Когда я инициирую модель во время инициализации вручную, форма будет правильно отображать данные пользователя. Если я получаю и назначаю значения обратно в форму из вызова Rest API, форма не обновляется.
Я проверил, что данные извлекаются правильно, мой метод диагностики также показывает, что модель правильно отображает данные ответа. Я пробовал zone.run, но форма тоже не обновляется.
ОБНОВЛЕНИЕ Я выяснил, что причина в том, что ответ представляет собой массив объектов. Изменение следующего решило проблему.
this.model = new User().fromJSON(user)[0];
Я не уверен, есть ли способ гарантировать, что моя служба всегда возвращает объект JSON вместо массива объектов?
userservice.ts
return this.http.post('http://ng2nodejs.azurewebsites.net/api/user', data , {
headers: authHeader
})
.map((response: Response) => { return response.json()});
Мой пользовательский компонент — диагностика правильно отображает данные
{{diagnostic}}
<h1>User Form</h1>
<form (ngSubmit)="f.form.valid && getUser()" #f="ngForm" >
<div class="form-group">
<label for="firstname">First Name</label>
<input type="text" id="firstname" [(ngModel)]="model.firstname" name="firstname" >
</div>
<div class="form-group">
<label for="lastname">Last Name</label>
<input type="text" id="lastname" [(ngModel)]="model.lastname" name="lastname" >
</div>
<button>Submit</button>
</form>
Модель пользователя, метод fromJSON предназначен для преобразования ответа в мою модель пользователя.
export class User {
username: string;
firstname: string;
lastname: string;
fromJSON(json) {
for (var propName in json)
this[propName] = json[propName];
return this;
}
}
Мой компонент
import { Component, NgZone } from '@angular/core';
import { User } from '../auth/user';
import { UserService } from '../auth/user.service';
@Component({
moduleId: module.id,
selector: 'app-first',
templateUrl: './first.component.html',
styleUrls: ['./first.component.css'],
})
export class FirstComponent {
constructor(private userService: UserService, private zone:NgZone) { }
model = new User();
getUser() {
this.userService
.getUser('User123')
.subscribe((user: Object) => {
this.zone.run(() => {
this.model = new User().fromJSON(user);
});
});
}
get diagnostic() { return JSON.stringify(this.model); }
}
getUser()
? Вы должны вызывать его onInit или в конструкторе. - person mickdev   schedule 06.03.2017this.model = this.model.fromJSON(user);
внутриgetUser
метода - person candidJ   schedule 06.03.2017<button type="submit">
; 2) создание экземпляра пользователя было бы чище, чемnew User(jsonData)
, а затем позволить конструктору обрабатывать jsonData; 3) Я не думаю, что вам нужна zone.run(). ПРИМЕЧАНИЕ: так что у вас есть форма, в которой пользователь вводит значения, и когда они отправляют, вы переопределяете значения формы результатом HTTP-вызова? это может быть не оптимально с точки зрения удобства использования. - person AngularChef   schedule 06.03.2017