*ngFor 中的第一个单选按钮需要单击两次才能显示选中

Question

编辑：“搜索...”和移动元素与它有关。如果我删除它，它在第一次搜索时效果很好。然后如果我再次搜索，我必须在每个新元素上单击两次才能选择它们。下面是一个没有搜索的视频。如果必须单击两次，我将鼠标从按钮上移开并重新打开

我有一个离子无线电组，其中一些元素来自 *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 中的单选按钮，单选按钮似乎也需要唯一值以避免此错误。我对我的索引进行了时间戳记，以使它们独一无二。

单击搜索时，我将当前时间 (ms) 设置为名为 time 的变量，然后将收音机设置为 value = "{{ time + i }}。读取时减去时间变量得到i。