Angular6 如何使用angular 6更改数组的索引？

我的打字脚本中有这个数组。我用的是角度6

formats: any = ['Years/Months/Days', 'Years/Months/Week', 'Months/Days', 'Week/Days', 'Week/Half Days', 'Week/4 Hours', 'Week/Hours', 'Days/Hours/30Min', 'Days/Hours/15Min'];

这是我的html代码

<select class="form-control" formControlName="format">
    <option [ngValue]="null">{{'Select Type' | translate}}</option>
    <option *ngFor="let format of formats" [ngValue]="format">{{format}}</option>
</select>

{{'Select Type'| translate}}
{{format}}

---

我想在“下一步”和“上一步”按钮的帮助下更改下拉列表值。

我建议您使用一个变量来存储所选选项的索引，并将其初始化为零，每次更改所选值时更新索引

然后，您可以为“下一步”和“上一步”创建两个按钮，并将单击事件映射到这两个按钮

.ts文件和函数可能如下所示

selectedindex:any = 0;

changed(event : Event):any{
 console.log(event)
if( event.target){
console.log( this.formats.indexOf(this.yourformobject.controls['format'].value))
this.selectedindex = this.formats.indexOf(this.yourformobject.controls['format'].value;
}
}
next():any{
 if(this.selectedindex < this.formats.length-1){
this.selectedindex++;
this.yourformobject.controls['format'].setValue(this.formats[this.selectedindex]);

 }
}

previous():any{
if(this.selectedindex>0){
this.selectedindex--;
this.yourformobject.controls['format'].setValue(this.formats[this.selectedindex]);

}
}

<form [formGroup]="yourformobject">
  <select class="form-control" formControlName="format" (click)="changed($event)">
    <option [ngValue]="null">Select Type</option>
    <option *ngFor="let format of formats" [ngValue]="format">{{format}}</option>
</select>
<button (click)="next()">next</button>
<button (click)="previous()">previous</button>
</form>

selectedindex:any=0；
已更改（事件：事件）：任何{
console.log（事件）
if（event.target）{
log（this.formats.indexOf（this.yourformobject.controls['format'].value））
this.selectedindex=this.formats.indexOf（this.yourformobject.controls['format'].value；
}
}
next（）：任何{
if（this.selectedindex0）{
此。选择索引--；
this.yourformobject.controls['format'].setValue（this.formats[this.selectedindex]）；
}
}

Html是这样的

selectedindex:any = 0;

changed(event : Event):any{
 console.log(event)
if( event.target){
console.log( this.formats.indexOf(this.yourformobject.controls['format'].value))
this.selectedindex = this.formats.indexOf(this.yourformobject.controls['format'].value;
}
}
next():any{
 if(this.selectedindex < this.formats.length-1){
this.selectedindex++;
this.yourformobject.controls['format'].setValue(this.formats[this.selectedindex]);

 }
}

previous():any{
if(this.selectedindex>0){
this.selectedindex--;
this.yourformobject.controls['format'].setValue(this.formats[this.selectedindex]);

}
}

<form [formGroup]="yourformobject">
  <select class="form-control" formControlName="format" (click)="changed($event)">
    <option [ngValue]="null">Select Type</option>
    <option *ngFor="let format of formats" [ngValue]="format">{{format}}</option>
</select>
<button (click)="next()">next</button>
<button (click)="previous()">previous</button>
</form>

选择类型
{{format}}
下一个
以前的

我建议您使用一个变量来存储所选选项的索引，并将其初始化为零，每次更改所选值时更新索引

然后，您可以为“下一步”和“上一步”创建两个按钮，并将单击事件映射到这两个按钮

.ts文件和函数可能如下所示

selectedindex:any = 0;

changed(event : Event):any{
 console.log(event)
if( event.target){
console.log( this.formats.indexOf(this.yourformobject.controls['format'].value))
this.selectedindex = this.formats.indexOf(this.yourformobject.controls['format'].value;
}
}
next():any{
 if(this.selectedindex < this.formats.length-1){
this.selectedindex++;
this.yourformobject.controls['format'].setValue(this.formats[this.selectedindex]);

 }
}

previous():any{
if(this.selectedindex>0){
this.selectedindex--;
this.yourformobject.controls['format'].setValue(this.formats[this.selectedindex]);

}
}

<form [formGroup]="yourformobject">
  <select class="form-control" formControlName="format" (click)="changed($event)">
    <option [ngValue]="null">Select Type</option>
    <option *ngFor="let format of formats" [ngValue]="format">{{format}}</option>
</select>
<button (click)="next()">next</button>
<button (click)="previous()">previous</button>
</form>

selectedindex:any=0；
已更改（事件：事件）：任何{
console.log（事件）
if（event.target）{
log（this.formats.indexOf（this.yourformobject.controls['format'].value））
this.selectedindex=this.formats.indexOf（this.yourformobject.controls['format'].value；
}
}
next（）：任何{
if（this.selectedindex0）{
此。选择索引--；
this.yourformobject.controls['format'].setValue（this.formats[this.selectedindex]）；
}
}

Html是这样的

selectedindex:any = 0;

changed(event : Event):any{
 console.log(event)
if( event.target){
console.log( this.formats.indexOf(this.yourformobject.controls['format'].value))
this.selectedindex = this.formats.indexOf(this.yourformobject.controls['format'].value;
}
}
next():any{
 if(this.selectedindex < this.formats.length-1){
this.selectedindex++;
this.yourformobject.controls['format'].setValue(this.formats[this.selectedindex]);

 }
}

previous():any{
if(this.selectedindex>0){
this.selectedindex--;
this.yourformobject.controls['format'].setValue(this.formats[this.selectedindex]);

}
}

<form [formGroup]="yourformobject">
  <select class="form-control" formControlName="format" (click)="changed($event)">
    <option [ngValue]="null">Select Type</option>
    <option *ngFor="let format of formats" [ngValue]="format">{{format}}</option>
</select>
<button (click)="next()">next</button>
<button (click)="previous()">previous</button>
</form>

选择类型
{{format}}
下一个
以前的

下拉列表应该由用户更改，而不是使用“下一个”和“上一个”…您能进一步说明吗？是的，您是对的。但我还想更改“使用”按钮。因此用户无需打开下拉列表。当任何人想要查看完整列表时，他们将打开下拉列表。下拉列表应该由用户更改，而不是由usi更改ng下一个和上一个…你能进一步详细说明吗？是的，你是对的。但我还想更改使用按钮。因此用户无需打开下拉列表。当任何人想要查看完整列表时，他们将打开下拉列表。这是工作，非常感谢。如果你可以请UpvoteTanks提供反馈，欢迎你！由具有记录的声誉少于15，但不要更改公开显示的帖子分数。当您第一次单击“下一步”按钮时，“上一步”按钮工作正常。如果您先单击“上一步”按钮，则它不工作。是的，这是因为我们正在将startindex初始化为零，而您可以每次将开始索引初始化为当您从backendIt的工作中获得数据时，选择的项目非常感谢。如果您可以请UpVoteTanks提供反馈，欢迎您！记录声誉低于15的人的投票，但不更改公开显示的帖子分数。当您第一次单击下一个按钮时，上一个按钮工作正常。如果您单击p这是因为我们正在将startindex初始化为零，而不是当您从后端获取数据时，您每次都可以初始化所选项目的开始索引