[英]Angular2 Update View After Form Submission
I'm creating a simple CRUD application using Angular2. 我正在使用Angular2创建一个简单的CRUD应用程序。 The app consists of a table to list current records and a form to submit new records. 该应用程序包含一个列出当前记录的表和一个提交新记录的表单。 What's the correct way to update my table to reflect the new record after I submit the form? 提交表单后更新表格以反映新记录的正确方法是什么? Here's what I have so far. 这是我到目前为止所拥有的。
export class PersonForm {
data: Object;
loading: boolean;
personForm: ControlGroup;
constructor(private _peopleService: PeopleService, personFormBuilder: FormBuilder) {
this.personForm = personFormBuilder.group({
'name': [],
'age': []
});
}
onSubmit(values:any) : void {
console.log(values);
this._peopleService.createPerson(values).subscribe()
}
}
In the above, I'm assuming .subscribe()
is where you'll handle the callback to update the view? 在上面,我假设.subscribe()
是你将处理更新视图的回调的地方?
And here's that view: 以下是这种观点:
<h1>People</h1>
<table class="ui celled small table ">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tr *ngFor="#person of people">
<td>
{{person.name}}
</td>
<td>
{{person.age}}
</td>
</tr>
</table>
<div>
<person-form></person-form>
</div>
And here's the form: 这是表格:
<form [ngFormModel]="personForm"(ngSubmit)="onSubmit(personForm.value)" class="ui form">
<div class="field">
<label>Full Name</label>
<input id="nameInput" type="text" placeholder="Full Name" [ngFormControl]="personForm.controls['name']">
</div>
<div class="field">
<label>Age</label>
<input id= "ageInput" type="text" placeholder="Age" [ngFormControl]="personForm.controls['age']">
</div>
<button type="submit" class="ui button blue">Submit</button>
</form>
In your view's component you will need to set an event listener. 在视图的组件中,您需要设置一个事件监听器。 Let's call that PersonComponent
for now since I don't know what you've called it. 我们现在称之为PersonComponent
,因为我不知道你叫它的是什么。
export class PersonComponent{
person = {};
updatePerson(person){
this.person = person;
}
}
Then in your PersonForm
you will need to set an EventEmitter
然后在PersonForm
您需要设置一个EventEmitter
export class PersonForm {
data: Object;
loading: boolean;
personUpdated: EventEmitter<any> = new EventEmitter<any>();
...
onSubmit(values:any) : void {
console.log(values);
this._peopleService.createPerson(values).subscribe((person) => {
this.personUpdated.emit(person);
});
}
}
Finally you'll subscribe to the event in you PersonComponent
which will listen to the personUpdated
event and run the updatePerson
method with the value of that event. 最后,您将在PersonComponent
订阅该事件,该事件将侦听personUpdated
事件并使用该事件的值运行updatePerson
方法。
<person-form (personUpdated)="updatePerson($event)"></person-form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.