我正在尝试使用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>
我不确定我做错了什么(服务器端或客户端)。有人可以帮帮我吗?如果需要更多代码段,请告诉我。
答案 0 :(得分: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>
在您的componet文件中,按如下方式声明答案数组:
answers: string[] = ['','',''];
这样您的答案将通过ngModel选择,这是获取Angular中表单字段值的正确方法。