作成したレコードを角型5のリストフォームに入力しない

Question

私のホームページでは、レコードを作成して、レコードを作成して「送信」ボタンをクリックして正常に追加する必要があります。その後、作成されたレコードはリストレコードでは使用できません。別の新しいレコードを作成して送信すると、前回作成したレコードがリストに表示されます。

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'); 
     }); 
    } 
    } 

} 

そして、私のHTMLページには、次のとおりです：

タイプのスクリプトコードがある

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

誰でもあなたは、HTMLテーブルの値を表示しているかどうかを確認し

Answer 1

をthat.Thankあなたを参照してください。またはそれを提出した後、あなたはテーブルを破壊する必要があります。

テーブルを再起動すると、現在の追加値も表示されます。

だから、送信機能の終了時にonload関数を呼び出すことができます。

その他の問題がある場合は、詳細をお知らせください。