javascript - 如果我们有更多记录而没有使用 angular8 中断，如何更改下拉值

Question

我在我的项目中使用了 Angular8，如果我有 2-3 条记录，那么上一个和下一个工作正常，但是如果我有更多记录，那么当我单击上一个/下一个时，它会破坏代码并击中中间。任何人都可以帮忙，如何解决这个问题。我附上了我的代码的工作演示。

TS：

  public changeDropdown(value) {
    const entry = this.dropdownValue.findIndex(x => x.noteId === parseInt(value));
    this.selectedDropdownValue = this.dropdownValue[entry].noteId;
  }

  public previousNextValue(value) {
      let previousValue = this.selectedDropdownValue;
      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]="selectedDropdownValue<=1"><i class="fas fa-chevron-left"></i>
                        Previous</button> 
                    <button class="btn btn-outline-primary ml-1" type="button" (click)="previousNextValue(true)"
                    [disabled]="selectedDropdownValue==dropdownValue.length">Next <i class="fas fa-chevron-right"></i></button>
                </div>

演示

标签： javascriptangulartypescript

Answer 1

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

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>

演示