Keine Eingabe des erstellten Datensatzes in der Liste in Angular 5

Question

In meiner Homepage muss ich Datensätze erstellen und wenn ich die Datensätze erstellen und klicken Sie auf Senden und erhalten wie erfolgreich hinzugefügt. Danach ist der erstellte Datensatz in den Listeneinträgen nicht mehr verfügbar. Wenn ich einen neuen Datensatz erstelle und absende, wird der zuvor erstellte Datensatz in der Liste angezeigt.

Typ Script-Code ist:

import { Component, OnInit } from '@angular/core'; 
import {FormControl, Validators, NgForm } from '@angular/forms'; 
import { VisitService } from '../shared/visit.service'; 
import { ToastrService } from 'ngx-toastr'; 
import { Response, RequestOptions, Http, Headers } from '@angular/http'; 
import { CookieService } from 'ngx-cookie-service'; 
@Component({ 
    selector: 'app-visit', 
    templateUrl: './visit.component.html', 
    styleUrls: ['./visit.component.css'] 
}) 
export class VisitComponent implements OnInit { 
    cookieValue = 'UNKNOWN'; 
    constructor(private visitService: VisitService,private http: Http,private cookieService: CookieService, private toastr: ToastrService) { } 

    ngOnInit() { 
    this.resetForm(); 
    this.cookieValue = this.cookieService.get('session'); 
    console.log('token from browser' + this.cookieValue); 
    const url = `http://localhost:8080//api/getallvisits/`; 
    // const headers = new Headers({'Content-Type': 'application/json','Authorization':'Bearer' +this.cookieValue}); 
    let headers = new Headers({ 'Authorization': 'Bearer ' + this.cookieValue }); 
// const headers = new Headers(); 
// headers.append('Authorization', 'Bearer' +this.cookieValue); 
    const options = new RequestOptions({ headers: headers }); 

    return this.http.get(url, options) 

    .subscribe(res => { 
     console.log('message from' + res); 
    // this.refresh(); 
     alert('successfullyyy...'); 
    // console.log('message from' + people.json()) 
    }); 
    } 
    resetForm(form?: NgForm) { 
    if (form != null) 
    form.reset(); 
    this.visitService.selectedVisit = { 
     'ID':null, 
     'UserName': '', 
     'Height': null, 
     'Weight': null, 
     'Temperature': null, 
     'BloodPressure': '', 
     'PatientNote': '', 
     'NurseNote': '', 
     'DoctorNote': '', 
    } 
    } 
    onSubmit(form: NgForm) { 
    if (form.value.ID == null) { 
     this.visitService.createVisit(form.value) 
     .subscribe(data => { 
      this.resetForm(form); 
      this.visitService.getVisitList(); 
      this.toastr.success('New Record Added Succcessfully', 'Employee Register'); 
     }) 
    } 
    else { 
     this.visitService.updateVisit(form.value.ID, form.value) 
     .subscribe(data => { 
     this.resetForm(form); 
     this.visitService.getVisitList(); 
     this.toastr.info('Record Updated Successfully!', 'Employee Register'); 
     }); 
    } 
    } 

} 

Und meine HTML-Seite ist:

<form class="visit-form" #visitForm="ngForm" (ngSubmit)="onSubmit(visitForm)"> 
    <input type="hidden" name="ID" #ID="ngModel" [(ngModel)]="visitService.selectedVisit.ID"> 
    <div class="form-row"> 
    <div class="form-group col-md-6"> 
     <mat-form-field class="example-full-width"> 
     <input class="form-control" matInput placeholder="UserName" name="UserName" #UserName="ngModel" [(ngModel)]="visitService.selectedVisit.username" 
     placeholder="User Name" required> 
     <div class="validation-error" *ngIf="UserName.invalid && UserName.touched">This Field is Required.</div> 
     </mat-form-field> 
     </div> 
    <div class="form-group col-md-6"> 
     <mat-form-field class="example-full-width"> 
     <input class="form-control" matInput placeholder="Height" name="Height" #Height="ngModel" [(ngModel)]="visitService.selectedVisit.height" placeholder="Height" 
     required> 
     <div class="validation-error" *ngIf="Height.invalid && Height.touched">This Field is Required.</div> 
     </mat-form-field> 
     </div> 
    </div> 
    <div class="form-group"> 
     <mat-form-field class="example-full-width"> 
    <input class="form-control" matInput placeholder="Temperature" name="Temperature" #Temperature="ngModel" [(ngModel)]="visitService.selectedVisit.temperature" placeholder="Temperature"> 
    </mat-form-field> 
    </div> 
    <div class="form-group"> 
     <mat-form-field class="example-full-width"> 
    <input class="form-control" matInput placeholder="Weight" name="Weight" #Weight="ngModel" [(ngModel)]="visitService.selectedVisit.weight" placeholder="Weight"> 
    </mat-form-field> 
    </div> 
    <div class="form-row"> 
    <div class="form-group col-md-6"> 
     <mat-form-field class="example-full-width"> 
     <input class="form-control" matInput placeholder="Blood Pressure" name="BloodPressure" #BloodPressure="ngModel" [(ngModel)]="visitService.selectedVisit.bloodpressure" placeholder="Blood Pressure"> 
     </mat-form-field> 
     </div> 
    <div class="form-group col-md-6"> 
     <mat-form-field class="example-full-width"> 
     <input class="form-control" matInput placeholder="Patient Note" name="PatientNote" #PatientNote="ngModel" [(ngModel)]="visitService.selectedVisit.patientnote" placeholder="Patient Note"> 
     </mat-form-field> 
     </div> 
    </div> 
    <div class="form-row"> 
    <div class="form-group col-md-6"> 
     <mat-form-field class="example-full-width"> 
     <input class="form-control" matInput placeholder="Nurse Note" name="NurseNote" #NurseNote="ngModel" [(ngModel)]="visitService.selectedVisit.nursenote" placeholder="Nurse Note"> 
     </mat-form-field> 
     </div> 
    <div class="form-group col-md-6"> 
     <mat-form-field class="example-full-width"> 
     <input class="form-control" matInput placeholder="Doctor Note" name="DoctorNote" #DoctorNote="ngModel" [(ngModel)]="visitService.selectedVisit.doctornote" placeholder="Doctor Note"> 
     </mat-form-field> 
     </div> 
    </div> 
    <div class="form-row"> 
    <div class="form-group col-md-8"> 
     <button [disabled]="!visitForm.valid" type="submit" class="btn btn-lg btn-block btn-info"> 
     <i class="fa fa-floppy-o"></i> Submit</button> 
    </div> 
    <div class="form-group col-md-4"> 
     <button type="button" class="btn btn-lg btn-block btn-secondary" (click)="resetForm(visitForm)"> 
     <i class="fa fa-repeat"></i> Reset</button> 
    </div> 
    </div> 
</form> 

Jeder siehe that.Thank Sie

Answer 1

Sehen Sie, wenn Sie den Wert in HTML-Tabelle angezeigten oder so, dass du nach dem submit den Tisch zerstören musst.

und erneut Reinit die Tabelle dann nur es wird auch den aktuellen Mehrwert angezeigt.

So können Sie das tun oder andernfalls die onload-Funktion aufrufen, wenn die Submit-Funktion endet.

oder wenn Sie ein anderes Problem haben, dann lassen Sie mich im Detail wissen.