typescript - Angular2 uppdatera vy efter formulärinlämning

Jag skapar en enkel CRUD-applikation med Angular2. Appen består av en tabell för att lista nuvarande poster och ett formulär för att skicka nya poster. Vad är det korrekta sättet att uppdatera min tabell för att återspegla den nya posten efter att jag skickat formuläret? Här är vad jag har hittills.

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()
  }
}

I ovanstående antar jag att .subscribe() är där du kommer hantera callbacken för att uppdatera vyn?

Och här är den utsikten:

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

Och här är formuläret:

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

Svar #1

I din vykomponent behöver du ställa in en händelselyssnare. Låt oss kalla den PersonComponent för tillfället eftersom jag inte vet vad du har kallat den.

export class PersonComponent{
    person = {};

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

Då behöver du i din PersonForm sätta en 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);
        });
    }
}

Slutligen kommer du att prenumerera på händelsen i din PersonComponent som kommer att lyssna på personUpdated-händelsen och köra updatePerson-metoden med värdet av den händelsen.

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

Relaterade artiklar