Javascript 如果使用angular8有更多记录而没有中断，如何更改下拉值 我在我的项目中使用了角8，如果我有2-3个记录，那么之前和下一个工作都很好，但是如果我有更多的记录，那么当我点击上一个/NEXT时，它会打破代码并在中间被击中。谁能帮忙，怎么解决这个问题。我已经附上了我的代码的工作演示

TS:

HTML:

以前的
下一个

---

问题在于，您正在寻找一个不存在的ID，并且您正在使用相同的变量作为值和索引，这会造成问题，您必须创建另一个变量来设置以前的值。这里有一个例子

selectedDropdownValue:number = 0;
  globalPreviousValue: number = 0;
  public dropdownValue = [
    {"noteId":1,"noteTypeId":1,"noteTypeName":null,"noteSubject":"subject -1","createdDate":"2020-08-07T15:21:48.71","createdBy":"Admin","noteText":null,"dropdownSubject":"08/07/2020 Admin subject -1"},{"noteId":2,"noteTypeId":2,"noteTypeName":null,"noteSubject":"subject -2 test","createdDate":"2020-08-07T15:25:38.553","createdBy":"Admin","noteText":null,"dropdownSubject":"08/07/2020 Admin subject -2 test"},{"noteId":3,"noteTypeId":2,"noteTypeName":null,"noteSubject":"subject -3 test","createdDate":"2020-08-11T11:26:36.007","createdBy":"Admin","noteText":null,"dropdownSubject":"08/11/2020 Admin subject -3 test"},{"noteId":10,"noteTypeId":3,"noteTypeName":null,"noteSubject":"test","createdDate":"2020-08-12T11:50:14.653","createdBy":"Admin","noteText":null,"dropdownSubject":"08/12/2020 Admin test"},{"noteId":11,"noteTypeId":5,"noteTypeName":null,"noteSubject":"tested","createdDate":"2020-08-12T14:36:43.41","createdBy":"Admin","noteText":null,"dropdownSubject":"08/12/2020 Admin tested"},
    {"noteId":12,"noteTypeId":135,"noteTypeName":"Email sent to Agent","noteSubject":"test","createdDate":"2020-08-12T17:25:15.71","createdBy":"Admin","noteText":null,"dropdownSubject":"08/12/2020 Admin test"},
    {"noteId":13,"noteTypeId":136,"noteTypeName":"Fax to Agent","noteSubject":"tested","createdDate":"2020-08-12T17:29:59.97","createdBy":"Admin","noteText":null,"dropdownSubject":"08/12/2020 Admin tested"}]
               
  public changeDropdown(value) {
    this.globalPreviousValue = value
    this.selectedDropdownValue = this.dropdownValue[value].noteId;
  }

  public previousNextValue(value) {
      let previousValue = this.globalPreviousValue;
      previousValue = value ? ++previousValue : --previousValue;
      this.changeDropdown(previousValue);
  } 

还要更改HTML中的验证，以便根据需要工作

<div class="card-footer text-right">
                    <button class="btn btn-outline-primary" type="button" (click)="previousNextValue(false)"
                    [disabled]="globalPreviousValue<=1"><i class="fas fa-chevron-left"></i>
                        Previous</button> 
                    <button class="btn btn-outline-primary ml-1" type="button" (click)="previousNextValue(true)"
                    [disabled]="globalPreviousValue==dropdownValue.length-1">Next <i class="fas fa-chevron-right"></i></button>
                </div>

以前的
下一个

---

您需要将逻辑从数组的值重构为索引，如

export class AppComponent {
  selectedDropdownValue:number = 0;
  selectedIndex: number = -1;
  public dropdownValue = []; // data
               
  public previousNextValue(selectedIndex) {
    this.selectedIndex = selectedIndex;
    this.selectedDropdownValue = this.dropdownValue[selectedIndex].noteId;
  }
  public changeDropdown(selectedDropdownValue){
    this.selectedDropdownValue = selectedDropdownValue;
    this.selectedIndex = this.dropdownValue.findIndex(x => x.noteId === parseInt(selectedDropdownValue));

  }
}

下一个和上一个的视图如下

<select class="custom-select w-100" name="noteTypeId" (change)="changeDropdown($event.target.value)" [value]="selectedDropdownValue">
    <option value="0" selected disabled>Select Note Details</option>
    <option *ngFor="let notesItem of dropdownValue" [value]="notesItem.noteId">
        {{notesItem.dropdownSubject}}
    </option>
</select>

<div class="card-footer text-right">
    <button class="btn btn-outline-primary" type="button" (click)="previousNextValue(selectedIndex - 1)"
    [disabled]="selectedIndex < 1"><i class="fas fa-chevron-left"></i>
        Previous</button> 
    <button class="btn btn-outline-primary ml-1" type="button" (click)="previousNextValue(selectedIndex + 1)"
    [disabled]="selectedIndex >= dropdownValue.length - 1">Next <i class="fas fa-chevron-right"></i></button>
</div>

选择备注详细信息
{{notesItem.dropdownSubject}
以前的
下一个

---

这一行x.noteId===parseInt（value）是问题所在，因为nodeId==4不存在。需要澄清的是，为什么即使我手动选择了第一个选项，下拉列表也总是被选择为第二个值？这里，当我从下拉列表中手动选择时，如果我单击第一个值，那么我希望第一个值被绑定，但是，当我手动选择时，我能够选择所选选项的下一个值。@Bhrungarajni我在更改问题上有正确的下拉列表

export class AppComponent {
  selectedDropdownValue:number = 0;
  selectedIndex: number = -1;
  public dropdownValue = []; // data
               
  public previousNextValue(selectedIndex) {
    this.selectedIndex = selectedIndex;
    this.selectedDropdownValue = this.dropdownValue[selectedIndex].noteId;
  }
  public changeDropdown(selectedDropdownValue){
    this.selectedDropdownValue = selectedDropdownValue;
    this.selectedIndex = this.dropdownValue.findIndex(x => x.noteId === parseInt(selectedDropdownValue));

  }
}

<select class="custom-select w-100" name="noteTypeId" (change)="changeDropdown($event.target.value)" [value]="selectedDropdownValue">
    <option value="0" selected disabled>Select Note Details</option>
    <option *ngFor="let notesItem of dropdownValue" [value]="notesItem.noteId">
        {{notesItem.dropdownSubject}}
    </option>
</select>

<div class="card-footer text-right">
    <button class="btn btn-outline-primary" type="button" (click)="previousNextValue(selectedIndex - 1)"
    [disabled]="selectedIndex < 1"><i class="fas fa-chevron-left"></i>
        Previous</button> 
    <button class="btn btn-outline-primary ml-1" type="button" (click)="previousNextValue(selectedIndex + 1)"
    [disabled]="selectedIndex >= dropdownValue.length - 1">Next <i class="fas fa-chevron-right"></i></button>
</div>