如果我們有更多記錄而沒有使用 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>

演示

Answer 1

問題是您正在尋找一個不存在的 ID，並且您使用相同的變量作為值和索引，這會造成麻煩，您必須創建另一個變量來設置 previousValue。 這是一個例子。

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>

工作演示

Answer 2

您需要將邏輯從值重構為數組的索引，例如

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>

演示