时间戳

首页 > 解决方案 > ionic 4中的动态单选按钮

angular - ionic 4中的动态单选按钮

问题描述

我是ionic4的新手。我使用 *ngFor 生成多张卡片，每张卡片都有一个无线电组。如何从每张卡中获取单选组的值？我有一组问题，每个问题都会显示在每张卡片上。每张卡片都有一个带有 5 个单选按钮的单选组。我需要从每张卡中获取无线电组的值。


      <ion-header>
          <ion-toolbar color="primary">
            <ion-title color="light">
              <h1>title</h1>
            </ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
            <ion-card *ngFor="let question of questionnaire">
            <ion-card-header>
            <ion-card-title>
                <h4>{{question.title}}</h4>
            </ion-card-title>
            </ion-card-header>
            <ion-card-content>
              <ion-text><h6>Rating:</h6></ion-text>
                <div margin-vertical text-center>
                  <ion-grid>
                    <ion-row>
                        <ion-radio-group>
                      <ion-col>
                          <ion-radio value="1" ></ion-radio>
                      </ion-col>
                      <ion-col>
                          <ion-radio value="2"></ion-radio>
                      </ion-col>
                      <ion-col>
                          <ion-radio value="3"></ion-radio>
                      </ion-col>
                      <ion-col>
                          <ion-radio value="4"></ion-radio>
                      </ion-col>
                      <ion-col>
                          <ion-radio value="5"></ion-radio>
                      </ion-col>
                    </ion-radio-group>
                    </ion-row>
                  </ion-grid>
                </div>   
            </ion-card-content>
          </ion-card>
          <div margin-vertical text-center>
              <ion-button (click) = 'OnClickResponse()'>SUBMIT </ion-button>
          </div>
        </ion-content>

import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';
import { Http } from '@angular/http';
import { forEach } from '@angular/router/src/utils/collection';

@Component({
  selector: 'app-questionnaire',
  templateUrl: './questionnaire.page.html',
  styleUrls: ['./questionnaire.page.scss'],
})

export class QuestionnairePage implements OnInit {

  public rating: any;
  public questionnaire: any;
  public i: any;
  public QA: any;
  public fetched = new Array(5);
  public randomArray = new Array(5);
  public value: any;

  constructor(public navCtrl: NavController, public http: Http) {}

  ngOnInit() {
    let iterate: number;
    let random: number;
    const a: number[] = [1, 4, 0, 3, 2];
    const b: number[] = [0, 3, 1, 4, 2];
    const c: number[] = [4, 1, 2, 3, 0];
    const d: number[] = [2, 0, 4, 1, 3];
    const e: number[] = [3, 1, 0, 2, 4];

    this.http
      .get(url)
      .subscribe(response => {
        this.QA = response.json();
        console.log(this.QA);
        iterate = 0;
        for (let i of this.QA.data) {
          this.fetched[iterate] = i.content;
          iterate++;
        }
        random =  Math.floor(Math.random() * 5 + 1 );
        switch(random) {
          case 1:
            this.OnLoop(a);
            break;
            case 2:
              this.OnLoop(b);
              break;
              case 3:
                this.OnLoop(c);
                break;
                case 4:
                  this.OnLoop(d);
                  break;
                  case 5:
                    this.OnLoop(e);
                    break;

        }
      });


  }
  OnLoop(index) {
    let iterate = 1;
    for (let i of index) {
      this.randomArray[iterate] = i;
      iterate++;
    }

    this.questionnaire = [
        { title: this.fetched[this.randomArray[1]] },
        { title: this.fetched[this.randomArray[2]] },
        { title: this.fetched[this.randomArray[3]] },
        { title: this.fetched[this.randomArray[4]] },
        { title: this.fetched[this.randomArray[5]] }
      ];
    }
  OnClickResponse() {

  }
  }

标签： angularionic4

解决方案

您需要了解的是，您不是在构建 jQuery / html 样式的表单，而是在构建 Angular 应用程序。

这意味着要考虑不同的结构方式。

表格不是您的“唯一真实来源”。您不呈现表单，让用户做他们想做的事，然后在将来的某个时候将数据从表单中拉回并处理它。

你需要做的是在后台代码中构建一个代表表单的数据结构。然后你两种方式将该数据绑定到你的表单。这就是 Angular 的专长。

当您的用户对表单进行更改时，更新会与您在后台设置的数据结构同步，因此您始终可以轻松访问它。

这意味着您的页面应如下所示：

// 模板 TS

import { Component, OnInit } from '@angular/core';

export interface question {
  title: string;
  answer: number;
}

@Component({
  selector: 'app-questionnaire',
  templateUrl: './questionnaire.page.html',
  styleUrls: ['./questionnaire.page.scss'],
})
export class QuestionnairePage implements OnInit {

  questions: question[] = [];

  constructor() { }

  ngOnInit() {
    // setup sample questions
    for(let i = 1; i <= 5; i++) {
      this.questions.push({ title: `Example Question ${i}`, answer: undefined });
    }
  }

  getQuestionResults() {
    // no need to "get" the results
    // they are already bound to the questions property
    console.log(this.questions);
  }
}

// 模板 HTML

<ion-header>
  <ion-toolbar color="primary">
    <ion-title color="light">
      <h1>title</h1>
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-card *ngFor="let question of questions">
    <ion-card-header>
      <ion-card-title>
        <h4>{{question.title}}</h4>
      </ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-text>
        <h6>Rating:</h6>
      </ion-text>
      <div margin-vertical text-center>
        <ion-grid>
          <ion-row>
            <ion-radio-group [(ngModel)]="question.answer">
              <ion-col>
                <ion-radio value="1"></ion-radio>
              </ion-col>
              <ion-col>
                <ion-radio value="2"></ion-radio>
              </ion-col>
              <ion-col>
                <ion-radio value="3"></ion-radio>
              </ion-col>
              <ion-col>
                <ion-radio value="4"></ion-radio>
              </ion-col>
              <ion-col>
                <ion-radio value="5"></ion-radio>
              </ion-col>
            </ion-radio-group>
          </ion-row>
        </ion-grid>
      </div>
    </ion-card-content>
  </ion-card>
  <div margin-vertical text-center>
    <ion-button (click)='getQuestionResults()'>SUBMIT</ion-button>
  </div>
</ion-content>

并会产生这样的应用程序：

在此处输入图像描述

输出如下：

在此处输入图像描述

重要的是要意识到，如果你在数据结构上设置了一些代码，那么 UI 中的值也会更新：

this.questions[2].answer = 5;

将为问题 2 选择值为 5 的单选按钮：

在此处输入图像描述

当您将 JSON 加载放回我为演示删除的位置时，您可以使用这个想法。

附带说明一下，您似乎已经开始编写 Angular / Ionic 代码，而没有参加任何有关 Angular / Ionic 的课程。如果您先学习基础知识，您将获得更大的成功。

推荐阅读