如果我们有更多记录而没有使用 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>

演示