Nothing handled the action 'deleteComment'

Question

I have 2 action handlers, updateComment and deleteComment, both climbing up to the route in exact the same way, yet updateComment works just fine, where deleteComment does not, giving the error 'Nothing handled the action 'deleteComment'.

Route: Review.js

updateComment(comment, params) {
            Object.keys(params).forEach(function(key) {
                if(params[key]!== undefined) {
                    comment.set(key,params[key]);
                }
            });
            comment.save();
        }
    },
    deleteComment(comment) {
                comment.destroyRecord();
        }

Review.hbs

{{comment-list
    loginId=model.loginId
    article=model.article
    user=model.user
    session=model.session
    updateComment="updateComment"
    deleteComment="deleteComment"
}}

Components: comment-list.js

import Ember from 'ember';

export default Ember.Component.extend({
    actions: {

        updateComment(comment) {
            let params = {
                title: this.get('title')
            };
            this.sendAction('updateComment', comment, params);
        },
        deleteComment(comment) {
            this.sendAction('deleteComment', comment);
        }
    }
});

comment-list.hbs

    {{#each article.comments as |comment|}}
    {{comment-tile
            comment=comment
            user=user
            loginId=loginId
            updateComment="updateComment"
            deleteComment="deleteComment"

    }}
{{/each}}

comment-tile.js is exactly the same as comment-list.js.

comment-tile.hbs

            {{#if isAllowed}}
            {{comment-update
                    user=user
                    comment=comment
                    updateComment="updateComment"
            }}

            {{comment-delete
                    user=user
                    comment=comment
                    deleteComment="deleteComment"
            }}
        {{/if}}

comment-update.js + category-update.hbs

import Ember from 'ember';

export default Ember.Component.extend({
    updateCommentForm: false,
    actions: {
        updateCommentForm() {
            this.set('updateCommentForm', true);
        },
        updateComment(comment) {
            let params = {
                title: this.get('title'),
                body: this.get('body'),
                score: this.get('score')
            };
            this.set('updateCommentForm', false);
            this.sendAction('updateComment', comment, params);
        }
    }

});

{{#if updateCommentForm}}
    <div>
        <form>
            <div class="form-group">
                <label for="titleupdate">Titel</label>
                {{input value=comment.title id="titleupdate"}}
            </div>
            <div class="form-group">
                <label for="bodyupdate">Inhoud</label>
                {{input value=comment.body id="bodyupdate"}}
            </div>
            <div class="form-group">
                <label for="scoreupdate">Score</label>
                {{input value=comment.score id="scoreupdate"}}
            </div>

            <button class="btn-default" {{action 'updateComment' comment}}>Opslaan</button>
        </form>
    </div>
{{else}}
    <button class="btn-default btn-info" {{action 'updateCommentForm'}}>Aanpassen</button>
{{/if}}

comment-delete.js + comment-delete.hbs

import Ember from 'ember';

export default Ember.Component.extend({
    actions: {
        deleteComment(comment) {
            this.sendAction('deleteComment', comment);
        }
    }
});

<button class="btn-default btn-danger" {{action 'deleteComment' comment}}>Verwijderen</button>

It's the exact same code, just splitting up into 2 components at the end. I can't, for the life of me, work out why the delete action isn't working. When I changed the name from destroyComment to deleteComment, I worked my way down from route to deepest component and the error changed when I renamed the deepest component, so I'm guessing it goes wrong at the deepest level, but again, I really don't see why.

EDIT 1: Changed my code to closure actions, as suggested, but the same problem persists.

EDIT 2: In review.js,there was a curly brace missing on a higher level than the code I posted. actions:{} was closed after updateComment and before deleteComment, excluding the latter for use, but Webstorm didn't throw an error. This was the full code with the error:

    actions: {
    saveComment(params) {
        let newComment = this.store.createRecord('comment', params);

        let article = params.article;
        let user = params.user;
        article.get('comments').addObject(newComment);
        user.get('comments').addObject(newComment);
        newComment.save().then(function () {
            return article.save().then(function () {
                return user.save();
            });
        });
    },
    updateComment(comment, params) {
        Object.keys(params).forEach(function (key) {
            if (params[key] !== undefined) {
                comment.set(key, params[key]);
            }
        });
        comment.save();
    },
    deleteComment(comment) {
        comment.destroyRecord();
    }
//Here should have been another curly brace.
});

Answer 1

In review.js,there was a curly brace missing on a higher level than the code I posted. actions:{} was closed after updateComment and before deleteComment, excluding the latter for use, but Webstorm didn't throw an error.

See code from EDIT 2 to gaze upon my stupidity in all its glory.