Question

我是角5的新人我试图用数据库中的数据填充表单。到目前为止，它隐藏了我的形式，从ts方面它只显示null。

PHP代码：

include ('conexion.php');
$id = $_GET['id'];
$sql = "SELECT * FROM tbl_usuario WHERE id=".$id;

if($con){

if(!$result = mysqli_query($con,$sql)) die();

while($data = mysqli_fetch_assoc($result)){
$arreglo[] = $data;
}
echo json_encode($arreglo);
}else{
die ("error");
}

form.html :(我使用或不使用括号的ngModel）

<div class="forms">
  <form method="post"  *ngFor="let x of datos">
    <div class="form-row">
      <div class="form-group col-md-4">
        <label>Nombre</label>
        <input type="text" class="form-control col-10" (ngModel)="x.nombre" name="nombre" value="x.nombre" />
      </div>
      <div class="form-group col-md-4">
        <label>Apellido Paterno</label>
        <input type="text" class="form-control col-10"  (ngModel)="x.a_paterno"  name="a_paterno"  value="x.a_paterno"  required/>
      </div>
      <div class="form-group col-md-4">
        <label>Apellido Materno</label>
        <input type="text" class="form-control col-10"   (ngModel)="x.a_materno"  name="a_materno" value="x.a_materno" required/>
      </div>
    </div>
    <div class="form-row">
      <div class="form-group col-md-6">
        <label>Edad</label>
        <input type="text" class="form-control col-10"    (ngModel)="x.edad" name="edad"  value="x.edad" required/>
      </div>
      <div class="form-group col-md-6">
        <label>Carrera</label>
        <input type="text" class="form-control col-10" (ngModel)="x.carrera"  name="carrera"  value="x.carrera" required />
      </div>
      <div class="col-md-10">
        <label>Direccion</label>
        <input type="text" class="form-control col-12"  (ngModel)="x.direccion"  name="direccion"  value="x.direccion" required/>
      </div>
      <div class="col-md-10">
        <br>
        <label>Telefono</label>
        <input type="text" class="form-control col-12"  (ngModel)="x.telefono" name="telefono"  value="x.telefono" required/>
      </div>

    </div>
    <br>
    <button type="submit" class="btn btn-primary">Enviar Datos</button>
    <br>
    <br>
  </form>
</div>

form.ts：

constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute) {
    this.mostrarDatos();
  }

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.id = params['id']; // (+) converts string 'id' to a number
      console.log('Mi id' + this.id);
    });
  }
  mostrarDatos() {
    console.log(this.id);
   this.http.get('http://localhost/crudu/mostrarID.php?id=' + this.id).subscribe((data) => {
     this.datos = data;
     console.log(this.datos);

   });
  }

我一直在尝试许多解决方案但最后没有任何解决方案同样在我的路线或网址中显示为eUsuario / 1

Answer 1

尝试将(ngModel)替换为[(ngModel)]。目前，您有从输入到模型的绑定，但反之则不然。

从构造函数中删除mostrarDatos的调用，并在获得id后调用它。

this.route.params.subscribe(params => {
    this.id = params['id']; // (+) converts string 'id' to a number
    console.log('Mi id' + this.id);
    this.mostrarDatos();
});

Angular 5 - 使用mysql数据填充表单

1 个答案: