Auto Increment user id for the Array of User Input using Angular Service-CodePudding

How do I increment the user id for the new user input and use that value to delete or update the specific enter.

Like if user adds its details like in given below output picture link you can see the how output should it show I couldn't figure out how to give auto user id to the every user inputs. [this is store component][1] [Output for reference][2] below code is userservice

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  userArray : any[] =[];
  userId : number[]=[];
  constructor() { }
  public getUsers() : any[]{
    return this.userArray;
  }
 
  public save(obj : any):void {
    this.userArray.push(obj);
  }
store component code
export class StoreFormComponent implements OnInit {

  constructor(private builder : FormBuilder,private service : UserService) { }

  ngOnInit(): void {
  }
  userForm : FormGroup = this.builder.group({
    id:[''], **//problem this is where i want to store my incremented IDs and use them for CRUD operations**
    name : ['Lucifer'],
    gender :['male'],
    phone:['1231231'],
    email:['[email protected]'],
    address: this.builder.group({
      state:['LA'],
      city:['CA'],
      pin:['123123']
    })
  });
  
  saveForm(){
    this.service.save(this.userForm.value)
    console.log(this.userForm.value)
  }
  clear(){
    this.service.save({})
  }
}
html this is table for display the output  like if user adds its details like in given below output picture link you can see the how output should it show i couldnt figure out how to give auto user id to the every user inputs 
<div>
    <h3>User List</h3>
   
    <table *ngIf = "items" class = "table table-striped">
        <thead>
            <tr>
                <th>User Id</th><th>Name</th><th>gender</th><th>phone</th><th>email</th><th>state</th><th>city</th><th>pin</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor = "let user of items">
                <td>{{user.id}}</td> //problem I want to give auto increment IDs to user inputs 
                <td>{{user.name}}</td>
                <td>{{user.gender}}</td>
                <td>{{user.phone}}</td>
                <td>{{user.email}}</td>
                <td>{{user.address.state}}</td>
                <td>{{user.address.city}}`enter code here`</td>
                <td>{{user.address.pin}}</td>
            </tr>
        </tbody>
    </table>
</div>

this below are the pictures for storecomponent picture and the output picture [1]: https://i.stack.imgur.com/NK2Qi.jpg [2]: https://i.stack.imgur.com/cFjjD.jpg

CodePudding user response：

you can try something like this. But in the real world the ID should be generated server side i.e. from the DB itself

  public save(obj : any):void {
    const lastElement = this.userArray[this.userArray.length - 1];
    if(lastElement !== undefined){
       obj.id = lastElement.id 1;
    }
    else{
       obj.id = 0;
    }
    this.userArray.push(obj);
  }

also you should use an interface/type and not always any it makes the code easier to deal with