提交用户选择单选按钮值，其中值是从 json 定义的

Question

我正在尝试使用 angular 将单选按钮值插入 mySql 数据库。该表单包含单选按钮和已在 json 文件中定义的单选按钮值。这是 json 文件的样子：

//data.json

[{
  "surveyid": 101,
  "surveyname": "Vitamin",
  "createdby": "Dr. Sarah",
  "createddate": "16-01-2018",
  "question": [{
      "questionid": 1,
      "questiondesc": "Q-1?",
      "qno": 1,
      "alloptions": [{
          "options": "A",
          "answer": "Yes"
        },
        {
          "options": "B",
          "answer": "No"
        }
      ]
    },

    {
      "questionid": 2,
      "questiondesc": "Q_2?",
      "qno": 2,
      "alloptions": [{
          "options": "A",
          "answer": "Yes"
        },
        {
          "options": "B",
          "answer": "No"
        },
        {
          "options": "C",
          "answer": "Don't know"
        }
      ]
    },

    {
      "questionid": 3,
      "questiondesc": "Q_3",
      "qno": 1,
      "alloptions": [{
          "options": "A",
          "answer": "Yes"
        },
        {
          "options": "B",
          "answer": "No"
        }
      ]
    }
  ]
}]

我还为服务器端做了一个这样的功能：

app.post('/newPush', (req, res) => {
  let sql = 'INSERT INTO results(question1, question2, question3)values("' + req.body.question1 + '", "' + req.body.question2 + '", "' + req.body.question3 + '")';
  let query = db.query(sql, (err, result) => {
    if (err) {
      throw err;
    }
    console.log(result);
    res.send('success');
  })
})

在客户端。我做了一个插入功能，但看起来我做错了。我声明了 3 个变量，数据类型为string。

//service.ts
pushing(question1: string, question2: string, question3: string) {
  return this.http.post('http://localhost:8000/newPush', {
    question1: question1,
    question2: question2,
    question3: question3
  });
}

//component.ts
pushing(question1: string, question2: string, question3: string) {
  this.AppService.pushing(question1, question2, question3);
}

对于 html 绑定，它看起来像这样：

<div *ngIf="isVerified" align="left" class="container">
  <form>
    <div *ngFor="let items of jsonData">
      <div *ngFor="let items2 of items.question">
        <label>{{items2.questionid}}. {{items2.questiondesc}}</label>
        <div *ngFor="let items3 of items2.alloptions; let i=index">
          <div class="radio">
            <input type="radio" name="question{{items2.questionid}}" value="{{items3.answer}}"><b>{{items3.options}}</b>. {{items3.answer}}
          </div>
        </div><br>
      </div>
    </div>
    <div align="center">
      <button class="btn btn-sm btn-success" (click)="pushing(question1, question2, question3)">SUBMIT</button>
    </div>
  </form>
</div>

我不确定我在哪里做错了（服务器端或客户端）。任何人都可以帮助我吗？如果需要更多 sn-ps，请告诉我。

Answer 1

您的模板看起来不正确。使用以下内容：

<div *ngIf="isVerified" align="left" class="container">
  <form>
    <div *ngFor="let items of jsonData; let counter = index;">
      <div *ngFor="let items2 of items.question">
        <label>{{items2.questionid}}. {{items2.questiondesc}}</label>
        <div *ngFor="let items3 of items2.alloptions; let i=index">
          <div class="radio">
            <input type="radio" name="question{{items2.questionid}}_option{{i+1}}" [(ngModel)]='answers[counter ]' value="{{items3.answer}}"><b>{{items3.options}}</b>. {{items3.answer}}
          </div>
        </div><br>
      </div>
    </div>
    <div align="center">
      <button class="btn btn-sm btn-success" (click)="pushing(answers[0], answers[1], answers[2])">SUBMIT</button>
    </div>
  </form>
</div>

在您的组件文件中，如下声明答案数组：

answers: string[] = ['','',''];

这样你的答案将通过 ngModel 选择，这是在 Angular 中获取表单字段值的正确方法。