Angular 8 Выбор привязки свойств Option

Question

У меня есть такой вариант выбора .. В этом раскрывающемся списке я вызываю API, чтобы получить некоторые данные.

<div class="mb-frm_l frm_r">
            <div class="dropdown inputs">
              <select
                [ngClass]="{
                  error:
                    billingForm.controls.selectDistrict.errors?.required &&
                    ((billingForm.controls['selectDistrict'].dirty &&
                      billingForm.controls['selectDistrict'].touched) ||
                      billingForm.controls['selectDistrict'].errors
                        .isValidString)
                }"
                formControlName="selectDistrict"
                id="selectDistrict"
                (focus)="onFocus()"
                (blur)="onBlur()"
                (change)="getCityList($event.target.value)" // here i want to pass the District name
              >
                <option value="">Select District</option>
                <option
                  *ngFor="let district of districtList"
                  [attr.district-id]="district.district_id"
                  [value]="district.district_id"
                >
                  {{ district.district }}
                </option>
              </select>
              <div
                *ngIf="
                  billingForm.controls['selectDistrict'].invalid &&
                  billingForm.controls['selectDistrict'].dirty &&
                  billingForm.controls['selectDistrict'].touched
                "
                class="error_txt"
              >
                Please select state
              </div>
            </div>
          </div>

Здесь я передаю выбранный value в getCityList($event.target.value)

Так как я хочу, чтобы district.district также находился в моем ts-файле

Мой вопрос: как я могу передать district.district здесь со значением ???

Спасибо!

Answer 1

Простая находка в getCityList - это то, что вам нужно. Поскольку вы не предоставили код, я что-то придумал:

getCityList($event.target.value): void {
    const value = '';
    const district = this.districtList.find((d) => d.district_id === $event.target.value);
    if (district) {
        value = district.district;
    }
}

Answer 2

• Измените свой тег Option с этого [value]="district.district_id" на [value]="district"
• Тогда ваш (change)="getCityList($event.target.value)" вернет выбранный районный объект. тогда вы можете получить доступ к любому свойству, которое захотите