仅当选中切换时才显示Ionic显示div

在Ionic框架中，如果你希望某个<div>元素仅在选中切换时显示，你可以使用Angular的条件渲染指令*ngIf或者[hidden]属性来实现这一功能。以下是基于Ionic 5.x和Angular的语法示例。

基础概念

*ngIf是Angular中的一个结构指令，它根据表达式的真假来添加或移除DOM元素。而[hidden]则是一个属性绑定，它会设置HTML元素的hidden属性，这个属性在值为true时隐藏元素，在值为false时显示元素。

类型与应用场景

单选按钮切换：适用于需要在多个选项中选择一个时显示不同的内容。
复选框切换：适用于需要根据复选框的选中状态来显示或隐藏内容。

示例代码

假设我们有一个单选按钮组，我们希望根据选中的值来显示不同的<div>。

<!-- 在Ionic组件模板中 -->
<ion-list>
  <ion-radio-group [(ngModel)]="selectedValue">
    <ion-item *ngFor="let option of options">
      <ion-label>{{ option.label }}</ion-label>
      <ion-radio slot="start" [value]="option.value"></ion-radio>
    </ion-item>
  </ion-radio-group>
</ion-list>

<div *ngIf="selectedValue === 'option1'">
  这是选项1的内容
</div>

<div *ngIf="selectedValue === 'option2'">
  这是选项2的内容
</div>

// 在Ionic组件类中
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.page.html',
  styleUrls: ['./example.page.scss'],
})
export class ExamplePage {
  selectedValue: string;
  options = [
    { label: '选项1', value: 'option1' },
    { label: '选项2', value: 'option2' }
  ];
}