Question

我是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() {

  }
  }

Answer 1

您需要了解的是，您不是在构建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加载放回为演示删除的JSON时，您可以使用这个想法。

作为一个旁注，似乎您已经开始对Angular / Ionic进行编码，而没有在Angular / Ionic上进行任何课程。如果您先学习基础知识，将会获得更大的成功。

ionic 4中的动态单选按钮

1 个答案: