不在Angular 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>

任何人都可以参考。谢谢你

Answer 1

看看你是否在html表中显示了这个值，然后在提交后你必须销毁该表。

再次重新启动表格，然后只显示当前的附加值。

所以你可以这样做，或者在提交函数结束时调用onload函数。

如果您还有其他问题，请详细告知我。