Angular 5 - Populate form with mysql data - php

Question

i'm new with angular 5.
I'm trying to populate a form with data from a database.
So far this it hid my form and from the ts side it only shows null.
PHP code:
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:(the ngModel i used with or without brackets)
<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);
});
}
I've been trying with many solutions but nothing at the end.
Also in my route or url it shows as eUsuario/1

Answer 1

Try to replace (ngModel) with [(ngModel)]. Currently you have a binding from the input into model but not vice versa.
Remove the call of mostrarDatos from the constructor and call it after you get the id.
this.route.params.subscribe(params => {
this.id = params['id']; // (+) converts string 'id' to a number
console.log('Mi id' + this.id);
this.mostrarDatos();
});