Question

所以我有一个Angular项目，当我尝试提交表单以编辑监视点时出现了问题。表单将使用他们尝试编辑的数据进行预填充，但是提交后，数据将重置为我为表单创建的组件变量。因此，提交表单时不会更新和重新分配表单的更新值。我要去哪里错了？

我的表单（mp-settings.html）：

<form (submit)="editMp()" class="form-horizontal" role="form">
  <div class="form-group">
    <table>
      <tbody>
        <tr>
          <td class="left_td">
            <p>Monitoring Point Name :</p></td><td><input type="text" name="name" class="col-md-12" [(ngModel)]="thisMp.name" />
          </td>
        </tr>
      <tr>
      <td class="left_td">
        <p>Outfall: </p></td><td><input type="text" name="outfall" class="col-md-12" [(ngModel)]="thisMp.outfall" /><br>
      </td>
    </tr>
    <tr>
      <td class="left_td">
        <p>Structure Type: </p></td><td><input type="text" name="structure_type" class="col-md-12" [(ngModel)]="thisMp.structure_type" /><br>
      </td>
    </tr>
    <tr>
    <td class="left_td">
      <p>Location Description: </p>
    </td>
  <td>
    <input type="text" name="location_description" class="col-md-12"[(ngModel)]="thisMp.location_description" /><br>
    </td>
  </tr>
  <tr>
    <td class="left_td">
      <p> Structure Dimensions: </p></td><td><input type="text" name="structure_dimensions" class="col-md-12" [(ngModel)]="thisMp.structure_dimensions" /><br>
    </td>
  </tr>
  <tr>
    <td class="left_td">
      <p> Pipe Height: </p></td><td><input type="text" name="pipe_height" class="col-md-6" [(ngModel)]="thisMp.pipe_height" />
    </td>
  <td class="left_td">
    <p> Pipe Width: </p></td><td><input type="text" name="pipe_width" class="col-md-6" [(ngModel)]="thisMp.pipe_width" /><br></td>
  </tr>
  <tr>
    <td class="left_td">
      <p> Pipe Material: </p></td><td><input type="text" name="pipe_material" class="col-md-6" [(ngModel)]="thisMp.pipe_material" /></td>

    <td class="left_td">
      <p> Pipe Slope: </p></td><td><input type="text" name="pipe_slope" class="col-md-6" [(ngModel)]="thisMp.pipe_slope" /></td></tr>
              <tr>
                  <td class="left_td">
                      <p> Latitude: </p></td><td><input type="text" name="latitude" class="col-md-6" [(ngModel)]="thisMp.latitude" /></td>

                  <td class="left_td">
                      <p> Longitude: </p></td><td><input type="text" name="longitude" class="col-md-6" [(ngModel)]="thisMp.longitude" /></td></tr>
        </tbody>
      </table>
    </div>
    <button type="submit" value="Edit Site" >Submit Monitoring Point Edits</button>
</form>

我的mp-settings.ts文件：

import { Component, OnInit, AfterViewInit, Input } from '@angular/core';
import { Http, Response } from '@angular/http';
import { AuthService } from "../services/auth.service";
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-mp-settings',
  templateUrl: './mp-settings.component.html',
  styleUrls: ['./mp-settings.component.css']
})
export class MpSettingsComponent implements OnInit{
   current_site;
   sites;
   errors;
   mp_id;
   thisMp = {
     name: "",
     site_id: this.authService.current_id,
     outfall: "",
     structure_type: "",
     location_description: "",
     structure_dimensions: "",
     pipe_height: 0,
     pipe_width: 0,   
     pipe_material: "",
     pipe_slope: 0,
     latitude: 0,
     longitude: 0
   }

  obj = { "monitoring_point": this.thisMp }
  constructor(private router: Router, private route: ActivatedRoute, 
  public authService: AuthService, private http: Http) { }

  ngOnInit() {
     console.log('test')

     this.route.params.subscribe(params => {
       this.mp_id = params['id']
       console.log(this.mp_id)
     })
     this.getOneMp(this.mp_id)
   }

 getOneMp(id){
    this.authService.getOneMonitoringPoint(id)
    .map((res: Response) => (
        res.json()
       ))
   .subscribe(data => {
     console.log(data)
     this.thisMp = data['monitoring_point']
     console.log(this.thisMp)

     })
    }

editMp() {
  let observable = this.authService.editMp(this.obj, this.mp_id);
  observable.subscribe(data => {
    if (data['errors']) {
      this.errors = data
      console.log(data['errors'])
    }
    else {
        console.log("success")
        this.router.navigate(['/site', 'id']);
      }
    })
  }
}

（在表单提交后，它重置为我在顶部声明“ thisMp”的位置，因此是否阻止了数据重新分配？）

让我知道是否有什么可以澄清的！非常感谢。

Answer 1

尝试写

let observable = this.authService.editMp(this.obj, 
    { "monitoring_point": this.thisMp }
)

提示：要检查值，请输入.html

{{thisMp |json}}

双向数据绑定不适用于Angular Form

1 个答案: