Angular 如何在使用角度推送数组中的项目时添加自动递增编号？

我试图将值推入数组，然后显示在视图中。一切都很好，但我想添加自动递增的项目编号。我在data.json文件中有以下数组

在user.service文件中

在user.component中，我在按Enter事件时将输入值推送到数组中，因为我只有一个输入值，所以我推了它，但还有一个id，它应该自动递增。下面是我正在尝试的代码

UserArray = [];
constructor(private userService: UserService, private _location: Location){}
show_value: string = '';
    OnPressEnter(show_value: string){ 
        var inputValue = show_value;
        this.show_value = show_value;
        this.UserArray.push({"id":5,"name":inputValue }); 
    }

你们可以看到id是静态的，我想让它成为动态的

<ul>
<li *ngFor="let userCourse of UserArray" (click)="onSelect(userCourse.name)">
<span>{{userCourse.id}}</span> | <a style="cursor:pointer;">{{userCourse.name}} </a>
</li>
</ul>

你可以这样用

  OnPressEnter(show_value: string){ 
            var inputValue = show_value;
            this.show_value = show_value;
            this.UserArray.push({"id":this.UserArray.length+1,"name":inputValue }); 
        }

---

获取数组的当前长度，并在推送之前将id指定为长度+1。我很高兴看到零件id发生了什么：this.UserArray.length+1如果删除并再次添加多个条目。一些id将重叠，因为您是按长度计算的@SinanEkiz假设我有3个项目，id分别为1、2和3。现在我删除了1和2，并在项目数组中添加了3个，id 3现在将重叠。您必须使用软删除，例如{id:this.UserArray.length+1，name:inputValue，isDeleted:false}}，并且您可以在isDeleted:true时隐藏，如果您是delete item，数组长度永远不会下降，id永远不会下降

<ul>
<li *ngFor="let userCourse of UserArray" (click)="onSelect(userCourse.name)">
<span>{{userCourse.id}}</span> | <a style="cursor:pointer;">{{userCourse.name}} </a>
</li>
</ul>

  OnPressEnter(show_value: string){ 
            var inputValue = show_value;
            this.show_value = show_value;
            this.UserArray.push({"id":this.UserArray.length+1,"name":inputValue }); 
        }