При повторном поиске object.value не работает массив find. Но это работает при указании значения напрямую

Question

У меня странная проблема.

<select [(ngModel)]="selectedBudget.year" name="" class="form-control" id="">
                  <option value="2020">2020</option>
                  <option value="2021">2021</option>
                </select>

и вот моя функция для поиска значения на основе выбранного года.

  addBudget(){
    alert(this.selectedBudget.year);//shows 2021
    alert(this.locations.find(p=>p.year=== 2021).locationName); here it shows the location name
    alert(this.locations.find(p=>p.year=== this.selectedBudget.year).locationName); //here it trigger error
/*     let rc = this.locations.find(x => x.locationName === this.selectedBudget.locationName && 
      x.year === this.selectedBudget.year).cost; //resource cost
      alert(rc); */
      console.info(this.locations);

  }

Как я уже упоминал во внутренних комментариях после каждого оповещения, он вызывает ошибку Невозможно прочитать свойство locationName of undefined . Но странная вещь заключается в том, что он обрабатывает строку чуть выше этого.

Так что 2021, когда я указываю в качестве значения непосредственно, оно возвращает, но при проверке по свойству оно не работает.

Есть ли что-то не так? с тем, как я указал ngModel. Шахта - это предварительно заполненный список.

Answer 1

Вы устанавливаете строковые значения, делая value="2021". Это означает, что строгое сравнение на равенство p.year === 2021 завершается неудачно, поскольку типы различаются.

Вместо этого свяжите значения числовых c с параметрами, используя [ngValue]. Это будет означать, что выбранное значение теперь равно цифре c, и ваша проверка строгого равенства пройдет.

<select [(ngModel)]="selectedBudget.year" class="form-control">
  <option [ngValue]="2020">2020</option>
  <option [ngValue]="2021">2021</option>
</select>