Как изменить значение раскрывающегося списка на основе нажатия кнопки Назад / Далее в angular8

Question

У меня есть раскрывающийся список и кнопки «Назад» и «Далее». Итак, здесь я могу вручную изменить значение раскрывающегося списка или щелкнув предыдущее и следующее, значения раскрывающегося списка, которые нужно изменить. Я пробовал, я могу получить предыдущее и следующее значение индекса, но не могу связать это значение внутри индекса в качестве выбранного параметра. может кто-нибудь мне помочь, где я ошибаюсь.

TS:

  public changeDropdown(value) {
    this.selectedDropdownValue = this.dropdownValue.findIndex(x => x.noteid === parseInt(value));
  }

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

HTML:

   <div class="row">
        <div class="col">
            <select class="custom-select w-100" name="noteTypeId" (change)="changeDropdown($event.target.value)">
                <option value="" selected disabled>Select Note Details</option>
                <option *ngFor="let notesItem of dropdownValue" [value]="notesItem.noteid">
                    {{notesItem.dropdownsubject}}
                </option>
            </select>
        </div>
    </div>
  <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-body">
                </div>
                <div class="card-footer text-right">
                    <button class="btn btn-outline-primary" type="button" (click)="previousNextValue(false)"
                    [disabled]="selectedDropdownValue==0"><i class="fas fa-chevron-left"></i>
                        Previous</button> 
                    <button class="btn btn-outline-primary ml-1" type="button" (click)="previousNextValue(true)"
                    [disabled]="selectedDropdownValue+1==dropdownValue.length">Next <i class="fas fa-chevron-right"></i></button>
                </div>
            </div>
        </div>
    </div>

DEMO

Answer 1

Вы должны внести некоторые изменения в свой код:

Вам нужно установить свойство value в select

[value]="selectedDropdownValue"

Прямо сейчас вы получаете индекс массива нужного вам значения для изменения, но ваши параметры имеют значение noteId

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

После этого изменения вам нужно изменить отключенные логи c на кнопках.

Для следующей кнопки нам понадобится чтобы получить noteId для последнего элемента, то есть:

[disabled]="selectedDropdownValue === dropdownValue[dropdownValue.length - 1].noteId"

И для предыдущей кнопки:

[disabled]="selectedDropdownValue<=1"

Чтобы отобразить значение по умолчанию (выберите), измените значение параметра на 0 (Или вы можете изменить начальное значение вашего selectedDropdownValue):

<option value="0" selected disabled>Select Note Details</option>

Наш лог c для следующего и предыдущего не так прост, как подсчет вверх и вниз, потому что нам нужно поддерживать noteIds, а не массив index нам нужно изменить метод previousNextValue:

public previousNextValue(value) {
    let previousValue = this.selectedDropdownValue;
    if (previousValue === 0) {
        // 0 as selectedDropdownValue is our initial value ('Select Note Details') and has not yet an actual noteid as value, so we set the noteId from our first element
        this.selectedDropdownValue = this.dropdownValue[0].noteId
    } else {
        // If we already have a valid noteId as selectedDropdownValue we need to find it in the array and get the noteId from the next element
        const currentIndex = this.dropdownValue.findIndex(x => x.noteId === previousValue);
        this.selectedDropdownValue = this.dropdownValue[value ? currentIndex + 1 : currentIndex - 1].noteId
    }
} 

https://stackblitz.com/edit/angular-gkgu6n?file=src / app / app.component.ts