Первая кнопка-переключатель внутри * ngFor требует двух кликов, чтобы показать выбранное

Question

Edit: "поиск ..." и перемещение элементов как-то связано с этим. Если я удаляю его, он отлично работает при первом поиске. затем, если я буду искать снова, мне придется дважды щелкнуть по каждому новому элементу, чтобы выбрать их. Ниже видео без поиска. Я убираю мышь с кнопки и снова включаю, если мне нужно щелкнуть ее дважды

У меня есть ионно-радиогруппа, где некоторые элементы взяты из * ngFor. Когда выбран первый элемент, значение формы изменяется (я проверил, что значение правильно изменяется в форме, и вы можете видеть, что кнопка «Отправить» становится доступной для нажатия с правильным значением). Но радио не проверено. Это происходит только на первом предмете. В приведенной ниже демонстрации вы увидите, что я нажимаю радио (кнопка отправки становится активной), а затем при втором щелчке радио выбирается визуально.

Два других радиомодуля выбираются по первому щелчку.

Вот HTML:

 <ion-content padding>
  <form [formGroup]="form">
    <ion-label>{{ message }}</ion-label>
    <ion-item>
      <ion-input color="primary" formControlName="search" placeholder="city or address"></ion-input>
      <ion-button (click)="searchClicked()" fill="clear"
        ><ion-icon onclick="searchClicked()" name="search" slot="icon-only"></ion-icon
      ></ion-button>
    </ion-item>
    <ion-list>
      <ion-radio-group formControlName="radio" (ionSelect)="radioSelected($event)">
        <ion-item *ngFor="let searchResult of searchResults; let i = index">
          <ion-radio value="{{ i }}" margin-end></ion-radio>
          <ion-label>{{ searchResult.name }}</ion-label>
        </ion-item>

        <ion-grid class="double-padding-start">
          <ion-row align-items-center>
            <ion-radio value="city" margin-end></ion-radio>
            <ion-select okText="Okay" cancelText="Dismiss" formControlName="city">
              <ion-select-option *ngFor="let city of cities" [value]="city.id">
                {{ city.name }}
              </ion-select-option>
            </ion-select>
          </ion-row>
        </ion-grid>
      </ion-radio-group>
    </ion-list>

    <ion-button
      (click)="dismiss()"
      [disabled]="!form.valid"
      fill="clear"
      class="button-padding-start large"
      margin
      >Submit</ion-button
    >
  </form>
</ion-content>

Вот запрашиваемый код:

  radioSelected($event: CustomEvent) {
    const details: RadioChangeEventDetail = $event.detail;
    const result = this.getResult(details.value);
    if (result) {
      this.changed.emit(result);
    }
  }

  getResult(radio?: string): SortAndFilter['searchResult'] | undefined {
    if (!this.form) return;
    const radioValue: string = radio ? radio : this.form.controls.radio.value;
    let result: SortAndFilter['searchResult'];

    if (radioValue === 'city') {
      const cityId = this.form.value.city;
      if (this.cities) {
        const city: City | undefined = this.cities.find(searchedCity => searchedCity.id === cityId);
        if (city) {
          result = {
            lat: city.lat,
            lng: city.lng,
            zoom: city.zoom,
            name: city.name,
          };
        }
      }
    } else {
      const index = Number(radioValue.split(',')[0]);
      if (typeof index === 'number' && this.searchResults.length > index) {
        result = {
          lat: this.searchResults[index]!.lat,
          lng: this.searchResults[index]!.lng,
          zoom: 12,
          name: this.searchResults[index]!.name,
        };
      }
    }

    return result;
  }

Это также запускается при нажатии на поиск:

  searchClicked() {
    if (!this.form) return;
    const searchTerm = this.form.controls.search.value;
    if (!searchTerm) return;
    this.searchStatus = 'searching';
    this.mapService.loadSdk().subscribe(loaded => {
      if (loaded) {
        this.mapService.lookupLocation(searchTerm).then(results => {
          if (results.length === 0) {
            this.searchStatus = `${searchTerm} not found`;
            this.searchResults = [];
          } else {
            this.searchResults = results;
            this.searchStatus = undefined;
          }
        });
      } else {
        this.searchStatus = undefined;
      }
    });
  }

Answer 1

Проблема была value="{{ i }}" для переключателя.Для радиокнопок требуются уникальные значения, даже если вы заменяете радиостанцию ​​в *ngFor, чтобы избежать этой ошибки.Я пометил свои индексы временем, чтобы сделать их уникальными.

Когда нажимается поиск, я устанавливаю текущее время (мс) в переменную, называемую временем, затем я устанавливаю радио на value = "{{ time + i }}.Переменная времени вычитается, чтобы получить i при чтении.