Привязка mdDialog превращает объект в [объект Object]

Question

У меня есть функция, которая вызывает mdDialog:

public deleteMediaAction(mediaItem: MediaModel): void {
    const templateType = this.mediaIsDeletable && !this.mediaIsDeleted ? 'delete-media' : 'show-deleted-media-information'
    const template = `<${templateType}
        media-item="${mediaItem}"
        on-delete="vm.deleteMedia()"
        ></${templateType}>`;

    this.$mdDialog
        .show({
            template,
            targetEvent: null,
            clickOutsideToClose: false
        })
        .then(() => {
            this.deleteMedia();
        });
    console.log(mediaItem);
}

Здесь console.log показывает правильный объект:

blobId: "c06c1430-0b02-ea11-8113 -00155d168404 "

имя файла:" zav + удаленный info.msg "

расширение:" .msg "

размер: 9

id:" 48501ff7 -1602-ea11-8113-00155d168404 "

Затем в компоненте <delete-media>:

@Component('Project', {
    selector: 'delete-media',
    templateUrl: '/AttachmentListComponent/deleteMedia.html',
    bindings: {
        mediaItem: '@',
    }
})

    private mediaItem: MediaModel;

    $onInit() {
        console.log(this.mediaItem);
    }

$ onInit регистрирует

[ объект объект]

Что происходит? Почему объект mediaItem превращается во что-то еще?

Answer 1

Измените шаблон следующим образом:

const template = `<${templateType}
    ̶m̶e̶d̶i̶a̶-̶i̶t̶e̶m̶=̶"̶$̶{̶m̶e̶d̶i̶a̶I̶t̶e̶m̶}̶"̶
    media-item="${JSON.stringify(mediaItem)}"
    on-delete="vm.deleteMedia()"
    ></${templateType}>`;

И затем используйте одностороннюю привязку для оценки:

@Component('Project', {
    selector: 'delete-media',
    templateUrl: '/AttachmentListComponent/deleteMedia.html',
    bindings: {
        ̶m̶e̶d̶i̶a̶I̶t̶e̶m̶:̶ ̶'̶@̶'̶,̶
        mediaItem: '<',
    }


})