Question

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

edit-demo]

我有一个离子无线电基团，其中某些元素来自* ngFor。选择第一项时，表单的值会更改（我测试了表单上的值已正确更改，您可以看到使用正确的值可以单击“提交”按钮）。但是，未检查收音机。这仅在第一项上发生。在下面的演示中，您将看到我单击单选按钮（启用了“提交”按钮），然后在第二次单击时，它直观地选择了单选按钮。

另外两个收音机都在第一次单击时选择。

demo]

这是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。

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

1 个答案: