mdDialog绑定将对象转换为[object Object] [英] mdDialog binding transforms object into a [object Object]

问题描述

我有一个调用mdDialog的函数:

I have a function that calls a 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此处显示正确的对象:

The console.log here shows there correct object:

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

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

文件名:"zav +删除的info.msg"

fileName: "zav + deleted info.msg"

扩展名:.msg"

大小:9

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

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记录一个

The $onInit logs a

[对象对象]

[object object]

这是怎么回事?为什么将 mediaItem 对象转换为其他对象?

What's going on? Why is the mediaItem object being transformed into something else?

推荐答案

更改模板，如下所示:

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

然后使用单向绑定进行评估:

And then use one-way binding to evaluate:

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


})

这篇关于mdDialog绑定将对象转换为[object Object]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！