提交用户选择单选按钮值，其中值是从json定义的 [英] Submit user choice radio button values where the values are defined from json
本文介绍了提交用户选择单选按钮值，其中值是从json定义的的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图使用角度将单选按钮值插入mySql数据库。表单cointains单选按钮和那些已经在json文件中定义的单选按钮值。以下是json文件的样子：
// data.json [ {surveyid：101，surveyname：Vitamin，createdby：Sarah博士，createddate：16-01-2018，question：[{questionid：1， questiondesc：Q-1，qno：1，alloptions：[{options：A，answer：是}，{options：B，answer ：否}]}，{questionid：2，questiondesc：Q_2？，qno：2，alloptions：[{options：A，answer：是}，{options：B，answer：否}，{options：C，answer：不知道}}}，{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'）;}）}） $ b $ p
在客户端。我做了一个插入功能，但看起来我做错了。我声明了3个变量，数据类型是
string 。
// service.tspushing（question1：string，question2：string，question3 ：string）{return this.http.post（'http：// localhost：8000 / newPush'，{question1：question1，question2：question2，question3：question3}）;} // component.tspushing（question1：string，question2 ：string，question3：string）{this.AppService.pushing（question1，question2，question3）;}
对于html绑定，它看起来像这样：
< div * ngIf =isVerifiedalign =leftclass =container> <形式> < div * ngFor =let items of jsonData> < div * ngFor =let items2 items.question> <标签> {{items2.questionid}}。 {{items2.questiondesc}}< /标签> < div * ngFor =let items3 items2.alloptions; let i = index> < div class =radio> < input type =radioname =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）=推送（question1，question2，question3）> SUBMIT< / button> < / DIV> < / form>< / div>
不知道我在哪里做错了（服务器端或客户端）。任何人都可以帮助我吗？请让我知道是否需要更多的片段。
解决方案
您的模板看起来不正确。使用以下内容：
< div * ngIf =isVerifiedalign =leftclass =container>
< form>
< div * ngFor =let items of jsonData; let counter = index;>
< div * ngFor =let items2 items.question>
< label> {{items2.questionid}}。 {{items2.questiondesc}}< /标签>
< div * ngFor =let items3 items2.alloptions; let i = index>
< div class =radio>
< input type =radioname =question {{items2.questionid}} _ option {{i + 1}}[（ngModel）] ='answers [counter]'value ={{items3 。答}}>< b取代; {{items3.options}}< / b取代。 {{items3.answer}}
< / div>
< / div>< br>
< / div>
< / div>
< div align =center>
在你的组件文件中，声明如下的答案数组：
answers：string [] = [''，''，''];
这样您的答案将通过ngModel进行选择，这是获取表单值的正确方法Angular中的字段。
I'm trying to insert radio button values to mySql database using angular. The form cointains radio buttons and those radio button values already defined in a json file. Here is how the json file looks like:
//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"
}
]
}
]
}]
I also made a function for server side like this:
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');
})
})
In the client side. I made a insert function but looks like i'm doing it wrong. I declared 3 variables and the data type is 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);
}
And for the html binding, it looks like this:
<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>
I'm not sure where i'm doing it wrong (the server side or the client side). Can anyone help me, please? Please let me know if more snippets are needed.
解决方案
Your template looks incorrect. Use the below:
<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>
In your componet file, declare the array of answers as follows:
answers: string[] = ['','',''];
This way your answers will be selected through ngModel, which is the right way to get the value of form fields in Angular.
这篇关于提交用户选择单选按钮值，其中值是从json定义的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
