提交表单后Angular2更新视图 [英] Angular2 Update View After Form Submission

问题描述

我正在使用Angular2创建一个简单的CRUD应用程序.该应用程序由一个列出当前记录的表和一个提交新记录的表单组成.提交表格后，更新表格以反映新记录的正确方法是什么?这就是我到目前为止所拥有的.

I'm creating a simple CRUD application using Angular2. 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()
  }
}

在上面，我假设您要在.subscribe()处理回调以更新视图?

In the above, I'm assuming .subscribe() is where you'll handle the callback to update the 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>

这是表格:

<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.

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.

export class PersonComponent{
    person = {};

    updatePerson(person){
        this.person = person;
    }
}

然后在您的PersonForm中，您需要设置一个EventEmitter

Then in your PersonForm you will need to set an 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方法.

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.

<person-form (personUpdated)="updatePerson($event)"></person-form>

这篇关于提交表单后Angular2更新视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！