Angular - 错误类型错误：_co.timeIn 不是函数

Posted 2023-03-07

【中文标题】Angular - 错误类型错误：_co.timeIn 不是函数

【英文标题】：Angular - ERROR TypeError: _co.timeIn is not a function

【发布时间】：2018-12-28 07:50:48

【问题描述】：

我正在使用 Angular、Express、Node.js 和 mysql 创建一个项目。我在 html 上创建了一个按钮，它将调用一个函数，该函数实际上将当前时间插入我的 MySQL 数据库并将插入的时间返回给 HTML。我的功能第一次完全有效。这是与问题相关的代码：

component.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>

component.ts

timeIn(val)
    val = 'val': val
    return this._api.timeIn(val)
    .then(data => this.timeIn = data)
    .catch(errors =>  console.log(errors))

service.ts

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

controller.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  ]

如您所知，为数据库中的每个学生创建了多个按钮。每个人都有自己的按钮和他们唯一的 student_id。但是，在单击第一个按钮后，它不再起作用。第一次执行 time_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)

如果我刷新页面，我可以再次调用该函数，但每次刷新不能多次调用。有谁知道为什么在第二次通话后它不起作用？我找不到任何针对我的问题太具体的内容，因此将不胜感激任何帮助。

【参考方案1】：

似乎在您的组件中您已将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))

---

注意：

我可以再次调用该函数，但每次只能调用一次 刷新

这是因为第一次你的timeIn 可以毫无问题地识别为一个函数。但是在您的timeIn 函数中，您将来自this._api.timeIn 的data 分配给timeIn，在这种情况下，timeIn 不再被视为一个函数，而是被视为data 的一种类型。这就是您收到 timeIn is not a function 的原因。使用不同的变量来分配 data。

感谢@coder 编辑我的答案:)

【讨论】：

非常感谢！看完后觉得自己好傻。

很高兴能为您提供帮助。如果它对你有用，请接受我的回答并投票:)

@EthanTom 因为现在你有一个正确的答案，我将其添加为 旁注： 这是因为第一次你的 timeIn 可以识别为一个函数没有任何问题。但是在您的timeIn 函数中，您将来自this._api.timeIn 的data 分配给timeIn，在这种情况下，timeIn 不再被视为函数类型，而是被视为data 的类型。这就是您收到 timeIn is not a function 的原因。这就是为什么“Saurabh Agrawal”的答案适用于您的情况。

@Saurabh Agrawal np。太棒了；）