Javascript 角度-错误类型错误:_co.timeIn不是函数
我正在使用Angular、Express、Node.js和MySQL创建一个项目。我在HTML上做了一个按钮,它将调用一个函数,该函数基本上将当前时间插入我的MySQL数据库,并将插入的时间返回到HTML。我的功能第一次就完全工作了。以下是与问题相关的代码: component.html:Javascript 角度-错误类型错误:_co.timeIn不是函数,javascript,mysql,node.js,angular,typeerror,Javascript,Mysql,Node.js,Angular,Typeerror,我正在使用Angular、Express、Node.js和MySQL创建一个项目。我在HTML上做了一个按钮,它将调用一个函数,该函数基本上将当前时间插入我的MySQL数据库,并将插入的时间返回到HTML。我的功能第一次就完全工作了。以下是与问题相关的代码: component.html: <tr *ngFor='let student of allStudents'> <td>{{student.student_id}}</td>
<tr *ngFor='let student of allStudents'>
<td>{{student.student_id}}</td>
<td>{{student.first_name}}</td>
<td>{{student.last_name}}</td>
<td *ngIf='!student.time_in'><input type="button" name="" (click)='timeIn(student.student_id)' value="">NULL</td>
<td *ngIf='student.time_in'>{{student.time_in}}</td>
</tr>
服务.ts
timeIn(val){
val = {'val': val}
return this._api.timeIn(val)
.then(data => this.timeIn = data)
.catch(errors => { console.log(errors)})
}
timeIn(id){
return this._http.post('/timeIn', id)
.map(data => data.json())
.toPromise();
}
timeIn: function(req, res){
connection.query('UPDATE students SET time_in = NOW() WHERE student_id = ' + req.body.val + ';', function(err, results, fields){
if (err) console.log(err.message);
connection.query('SELECT student_id, time_in FROM students WHERE student_id = ' + req.body.val + ';', function(err, results, fields){
if (err) console.log(err.message);
console.log(results);
res.send(results);
})
})
}
[ RowDataPacket { student_id: 45678, time_in: 2018-07-20T04:17:42.000Z } ]
controller.js
timeIn(val){
val = {'val': val}
return this._api.timeIn(val)
.then(data => this.timeIn = data)
.catch(errors => { console.log(errors)})
}
timeIn(id){
return this._http.post('/timeIn', id)
.map(data => data.json())
.toPromise();
}
timeIn: function(req, res){
connection.query('UPDATE students SET time_in = NOW() WHERE student_id = ' + req.body.val + ';', function(err, results, fields){
if (err) console.log(err.message);
connection.query('SELECT student_id, time_in FROM students WHERE student_id = ' + req.body.val + ';', function(err, results, fields){
if (err) console.log(err.message);
console.log(results);
res.send(results);
})
})
}
[ RowDataPacket { student_id: 45678, time_in: 2018-07-20T04:17:42.000Z } ]
Console.log(结果)
可以看出,数据库中的每个学生都会创建多个按钮。每一个按钮都有自己独特的学生id。但是,在第一次单击按钮后,它不再工作。第一次执行time\u in()时,将更新并返回当前时间。但是,该功能在之后不再工作。在HTML控制台中,它返回以下错误:
StudentdashboardComponent.html:29 ERROR TypeError: _co.timeIn is not a function
at Object.eval [as handleEvent] (StudentdashboardComponent.html:29)
at handleEvent (core.js:13589)
at callWithDebugContext (core.js:15098)
at Object.debugHandleEvent [as handleEvent] (core.js:14685)
at dispatchEvent (core.js:10004)
at core.js:10629
at HTMLInputElement.<anonymous> (platform-browser.js:2628)
at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4751)
at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
StudentdashboardComponent.html:29错误类型错误:\u co.timeIn不是函数
在Object.eval[作为handleEvent](StudentdashboardComponent.html:29)
在handleEvent(core.js:13589)
在callWithDebugContext上(core.js:15098)
在Object.debugHandleEvent[作为handleEvent](core.js:14685)
在dispatchEvent(core.js:10004)
在core.js:10629
在HTMLInputElement。(platformbrowser.js:2628)
在ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask(zone.js:421)
位于Object.onInvokeTask(core.js:4751)
在ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask(zone.js:420)
如果我刷新页面,我可以再次调用该函数,但每次刷新都不会有一次以上的效果。有人知道为什么在第二次呼叫后它不工作吗?我找不到任何对我的问题太具体的东西,所以任何帮助都将不胜感激 似乎在组件中,您已将
timeIn
声明为函数和变量
所以,因为这个角度,它是变量还是函数,会被弄糊涂。尝试更改变量名
下面是什么this.timeIn=data
timeIn(val){
val = {'val': val}
return this._api.timeIn(val)
.then(data => this.timeIn = data) // what is this timeIn ??????
.catch(errors => { console.log(errors)})
}
注意:
<tr *ngFor='let student of allStudents'>
<td>{{student.student_id}}</td>
<td>{{student.first_name}}</td>
<td>{{student.last_name}}</td>
<td *ngIf='!student.time_in'><input type="button" name="" (click)='timeIn(student.student_id)' value="">NULL</td>
<td *ngIf='student.time_in'>{{student.time_in}}</td>
</tr>
我可以再次调用该函数,但每次只能调用一次
刷新
这是因为您的timeIn
第一次可以毫无问题地识别为函数。但是在你的<代码> TIMEIN < /代码>函数中,你分配了<代码>数据>代码>来自<代码>。这就是为什么您会得到timeIn不是一个函数。使用不同的变量分配该数据
感谢@coder编辑我的答案:)非常感谢!看了这张照片,我觉得很傻。很高兴我能帮助你。如果我的答案对您有效,请接受我的答案并投票:)@EthanTom因为现在您有了正确的答案,我将此添加为旁注:这是因为您的timeIn
第一次可以毫无问题地识别为函数。但是,在你的<代码> TIMEIN < /代码>函数中,你分配了<代码>数据>代码>来自<代码>。这就是为什么您得到的timeIn不是一个函数。这就是为什么“Saurabh Agrawal”的答案在您的案例中有效。@Saurabh Agrawal np。很好;)