IONIC 5，无法使用 ngModel 将值传递给 TS 文件答案

【问题标题】：IONIC 5, unable to pass values to TS file with ngModelIONIC 5，无法使用 ngModel 将值传递给 TS 文件
【发布时间】：2020-03-22 22:36:54
【问题描述】：

在 IONIC 5 方面需要一些帮助..我想为每个 ion 项目添加点击功能...我希望在点击任何 raio 项目时出现一个表单

我尝试使用 (ng-click)="selection(item.id)" 也试过了

似乎没有一个按预期工作。

<div class="cat-holder">
        <ion-radio-group>
          <div class="rad-item" text-center>
            <ion-item text-center>
              <img src="assets/imgs/dstv.png" alt="">
              <ion-radio value="transport"></ion-radio>
            </ion-item>
            <ion-label>Item1</ion-label>
          </div>

          <div class="rad-item" text-center>
            <ion-item text-center>
              <img src="assets/imgs/bill1.svg" alt="">
              <ion-radio value="bill"></ion-radio>
            </ion-item>
            <ion-label>Item2</ion-label>
          </div>

        </ion-radio-group>
  </div>

【问题讨论】：

标签： ionic-framework ionic4 ionic5

【解决方案1】：

使用（点击）=“你想要的方法” 而在 ionic 5 中，不推荐使用 text-center，我认为您可以改用 class="ion-text-center"

在你的 ts 文件中：

export yourclass{
selectedValue:any;
}

在你的 html 文件中：

<div class="cat-holder">
        <ion-radio-group>
          <div class="rad-item" text-center>
            <ion-item text-center>
              <img src="assets/imgs/dstv.png" alt="">
              <ion-radio [(ngModel)]="selectedValue"  value="transport"></ion-radio>
            </ion-item>
            <ion-label>Item1</ion-label>
          </div>

          <div class="rad-item" text-center>
            <ion-item text-center  >
              <img src="assets/imgs/bill1.svg" alt="">
              <ion-radio [(ngModel)]="selectedValue" value="bill"></ion-radio>
            </ion-item>
            <ion-label>Item2</ion-label>
          </div>

        </ion-radio-group>
  </div>

<div *ngIf="selectedValue=='value u want from radio"></div>

【讨论】：

那么我将如何根据选择的内容显示新的 div
得到这个错误---> TypeError: Cannot read property 'id' of undefined
是的，我虽然你想按照你说的那样做：(ng-click)="selection(item.id)"，所以虽然你有这个功能
我无法让它工作..不知道出了什么问题..当我点击什么也没发生
在ng if中，检查是否selectedvalue=='transport'

【解决方案2】：

我终于能够使用下面的方法为 IONIC 5 完成它

在 .ts 文件上我这样做了，在 ion-radio-group 上使用 (ionChange)="segmentChanged($event)"

category:any = "天";

然后在 HTML..希望它可以帮助某人

          <ion-label>Select Biller</ion-label>
           <div class="cat-holder">
              <ion-radio-group (ionChange)="segmentChanged($event)" 
                  [value]="category">

              <div class="rad-item" text-center >
                <ion-item text-center>
                  <img src="assets/imgs/dstv.png" alt="">
                  <ion-radio value="transport" name="transport" ></ion-radio>
                </ion-item>
                <ion-label>Dstv</ion-label>
              </div>
              <div class="rad-item" text-center>
                <ion-item text-center>
                  <img src="assets/imgs/gotv.png" alt="">
                  <ion-radio value="Gotv" name="gotv" ></ion-radio>
                </ion-item>
                <ion-label>Gotv</ion-label>
              </div>


            </ion-radio-group>
          </div>

【讨论】：