Table shows Empty cells

[Neeta Sanas]

Implemented Exactly like this but table shoes empty rows...

[Dhiraj Ray]

Please check the API call in user.service.ts

[Neeta Sanas]

After Edit user it duplicating rows in table.
It Creates new user entry with updated value.

`

Edit User

<form [formGroup]="editForm" (ngSubmit)="onSubmit()">

Email address:

  <div class="form-group">
      <label for="password">Password:</label>
      <input type="password" formControlName="password" placeholder="Password" name="password" class="form-control" id="password">
    </div>

  <div class="form-group">
    <label for="firstName">First Name:</label>
    <input formControlName="firstName" placeholder="First Name" name="firstName" class="form-control" id="firstName">
  </div>

  <div class="form-group">
    <label for="lastName">Last Name:</label>
    <input formControlName="lastName" placeholder="Last name" name="lastName" class="form-control" id="lastName">
  </div>

  <button class="btn btn-success">Update</button>
</form>

`

`import { Component, OnInit } from '@angular/core';
import {UserService} from "../user.service";
import {Router} from "@angular/router";
import {User} from "../../models/user.model";
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {first} from "rxjs/operators";

@component({
selector: 'app-edit-user',
templateUrl: './edit-user.component.html',
styleUrls: ['./edit-user.component.css']
})
export class EditUserComponent implements OnInit {

user: User;
editForm: FormGroup;
constructor(private formBuilder: FormBuilder,private router: Router, private userService: UserService) { }

ngOnInit() {
let userId = localStorage.getItem("editUserId");

if(!userId) {
  alert("Invalid action.")
  this.router.navigate(['users']);
  return;
}
this.editForm = this.formBuilder.group({
  id: [],
  email: ['', Validators.required],
  password:['',Validators.required],
  firstName: ['', Validators.required],
  lastName: ['', Validators.required],
});
this.userService.getUserById(+userId)
  .subscribe( data => {
    this.editForm.setValue(data);
  });

}

onSubmit() {
this.userService.updateUser(this.editForm.value)
.pipe(first())
.subscribe(
data => {
this.router.navigate(['users']);
},
error => {
alert(error);
});
}

}`

`import {Injectable} from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import { User } from '../models/user.model';
//import{ Url } from '../constant';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class UserService {

constructor(private http : HttpClient) {}

private userUrl = 'http......'; //I have inserted ip address:port number/users
//private userUrl = '/api';

public getUsers() : Observable<User[]> {
return this.http.get<User[]>(this.userUrl);
//console.log(User);
}

public deleteUser(user) {
return this.http.delete(this.userUrl + "/"+ user.id);
}
public createUser(user: User):Observable {
console.log(user);
return this.http.post(this.userUrl, user);
}

updateUser(user: User) {
console.log(user);
return this.http.put(this.userUrl + '/' + user.id, user);
}
getUserById(id: number) {
return this.http.get(this.userUrl + '/' + id);
}
}
`

plz help

[Dhiraj Ray]

On click of Update, a dialog should appear in editable format. Pls check here - https://www.devglan.com/angular/angular-6-example