我正在使用 Angular2 创建一个简单的 CRUD 应用程序。该应用程序由一个列出当前记录的表格和一个用于提交新记录的表格组成。提交表单后更新表格以反映新记录的正确方法是什么？这是我到目前为止所拥有的。
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()
}
}
在上面，我假设.subscribe()是您将处理回调以更新视图的地方？
这是这个视图：
<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>
这是表格：
<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>
在视图的组件中，您需要设置一个事件侦听器。我们称之为PersonComponent现在因为我不知道你叫它什么。
export class PersonComponent{
person = {};
updatePerson(person){
this.person = person;
}
}
然后在你的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);
});
}
}
最后你会订阅你的活动PersonComponent它将听personUpdated事件并运行updatePerson方法与该事件的值。
<person-form (personUpdated)="updatePerson($event)"></person-form>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
