Table shows Empty cells

[NeetaSanas]

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

[only2dhir]

Please check the API call in user.service.ts

[NeetaSanas]

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: <input type="email" formControlName="email" placeholder="Email" name="email" class="form-control" id="email">

  <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<User> { console.log(user); return this.http.post<User>(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<User>(this.userUrl + '/' + id); } } `

plz help

[only2dhir]

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