使用 Angular 9 在 Ionic 5 中以编程方式在单选组中设置选中的单选按钮

Question

我正在 Ionic 5 和 Angular 9 中做一个应用程序。

我有一个带有选项的无线电组，我通过 HTTP 请求获取这些选项，并且我想将其中一个设置为以编程方式选择。

零件：

  options: {id: string, description: string}[] = [];
  optionSelected = null;

  constructor(
    private service: MyService,
  ) {
  }

  ngOnInit() {
    this.service.getOptions()
      .pipe(first())
      .subscribe(res => {
        this.options = res;

        // Setting the option selected by default.
        this.optionSelected = {id:"001", description:'This is selected by default'};
      });
  }

  trackById(index: number, option: any): string {
    return option.id;
  }

模板：

<ion-list>

    <ion-radio-group (ionChange)="optionSelected = $event.target.value" [(ngModel)]="optionSelected">

      <ion-item *ngFor="let a of options; trackBy: trackById">
        <ion-radio slot="start" [value]="a"></ion-radio>
        <ion-label class="ion-text-wrap"><h3>{{a.description}}</h3></ion-label>
      </ion-item>

    </ion-radio-group>

  </ion-list>

当我获取数据时，我分配了我想要被选中的 object，但是，它没有在无线电组中被选中。

我的目标是在获取数据时以编程方式检查无线电组中的单选按钮。

Answer 1

Object 比较不同于其他类型的比较。

例子：

1. 字符串和字符串比较：

   console.log("a" === "a"); // true

2. Object和object比较；

   console.log({a:1,b:2,c:3} === {a:1, b:2, c:3}); // false

，所以我认为您的错误是将object绑定为选项值。 因为，当它使用===运算符比较对象时，它返回 false。

要解决问题：

您需要绑定实体的 id。

模板：

<ion-radio-group [(ngModel)]="optionSelected">

  <ion-item *ngFor="let a of options; trackBy: trackById">
    <ion-radio slot="start" [value]="a.id"></ion-radio>
    <ion-label class="ion-text-wrap"><h3>{{a.description}}</h3></ion-label>
  </ion-item>

</ion-radio-group>

零件：

  ngOnInit() {
    this.service.getOptions()
      .pipe(first())
      .subscribe(res => {
        this.options = res;

        // Setting the option selected by default.
        this.optionSelected = res[0].id; // example
      });
     }

而且你不需要 (ionChange) function 因为[(ngModel)]是双向绑定，所以当它改变时，你的变量也在改变。 如果无论如何你需要在它发生变化时做一些事情，你可以使用ngModelChange事件，如下所示：

<ion-radio-group (ngModelChange)="changed()" [(ngModel)]="optionSelected">
</ion-radio-group>

最后，您将在optionSelected变量中获得所选选项的 id。 如果您需要完全找到选项实体：

const selectedOption = this.options.find(opt => opt.id === optionSelected);