angular-error typeerror:\u co.timein不是函数

0kjbasz6  于 2021-06-20  发布在  Mysql
关注(0)|答案(1)|浏览(276)

我正在使用angular、express、node.js和mysql创建一个项目。我在html上做了一个按钮,它将调用一个函数,这个函数将把当前时间插入mysql数据库,并将插入的时间返回给html。我的功能第一次就完全起作用了。以下是与问题相关的代码:
组件.html:

<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)})
}

服务.ts

timeIn(id){
    return this._http.post('/timeIn', id)
    .map(data => data.json())
    .toPromise();
}

控制器.js

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);
            })
        })
    }

console.log(结果)

[ RowDataPacket { student_id: 45678, time_in: 2018-07-20T04:17:42.000Z } ]

可以看出,数据库中为每个学生创建了多个按钮。每个按钮都有自己的按钮和唯一的学生id。但是,单击第一个按钮后,它就不再工作了。第一次执行\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)

如果我刷新页面,我可以再次调用该函数,但每次刷新都不能工作一次以上。有人知道为什么第二次打电话后就没用了吗?我找不到任何具体到我的问题,所以任何帮助将不胜感激。

7eumitmz

7eumitmz1#

似乎在你的组件中 timeIn 作为函数和变量。
因此,因为Angular 是变量还是函数,我们就搞不清楚了。尝试更改变量名。
是什么 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)})
}

注:
我可以再次调用该函数,但每次刷新时它只能运行一次
这是因为你第一次 timeIn 可以毫无问题地识别为函数。但在你的内心 timeIn 指定的函数 data 来自 this._api.timeIntimeIn 在这种情况下 timeIn 不再是一个函数,而是一种函数 data 有。所以你才会 timeIn is not a function . 使用不同的变量来赋值 data .
感谢@coder编辑我的答案:)

相关问题