mdDialog绑定将对象转换为[对象对象]

Posted 2021-04-11

我有一个调用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对象被转换为其他内容？

答案

此符号用于传递字符串参数'@'。将其更改为'='，用于对象

bindings: {
     mediaItem: '=',
}

另一答案

像这样更改模板：

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: '<',
    }


})