Angular组件间传值问题：弹窗组件无法显示接收的数据

以下是几个直接可行的解决方案，针对你控制台能打印数据但模板无法渲染的情况：

方案1：直接使用注入的data变量绑定模板 #

你已经通过@Inject(MAT_DIALOG_DATA)将弹窗数据注入为public data，完全可以直接在模板中使用这个变量，不需要额外赋值给hh，步骤如下：

修改PopupComponent的HTML模板：

<div class="container">
    <h2>Popup Content</h2>
    <p>Message: {{data.message}}</p>
    <p>Hi: {{data.hi}}</p>
</div>

同时简化TS代码，去掉冗余的hh变量和不必要的变更检测调用：

@Component({
    selector: 'app-popup',
    templateUrl: './popup.component.html',
    styleUrls: ['./popup.component.css']
})
export class PopupComponent implements OnInit{
    constructor(
        public dialogRef: MatDialogRef<PopupComponent>,
        @Inject(MAT_DIALOG_DATA) public data: any
    ) {
        console.log(this.data);
    }

    ngOnInit(): void {}

    closePopup(): void {
        this.dialogRef.close();
    }
}

方案2：将hh的赋值逻辑移到ngOnInit钩子 #

如果坚持要使用hh变量，建议把赋值操作从构造函数移到ngOnInit中——构造函数执行时组件还未完成初始化，模板绑定可能存在时序问题，调整后代码如下：

修改PopupComponent的TS代码：

@Component({
    selector: 'app-popup',
    templateUrl: './popup.component.html',
    styleUrls: ['./popup.component.css']
})
export class PopupComponent implements OnInit{
    hh: any;

    constructor(
        public dialogRef: MatDialogRef<PopupComponent>,
        @Inject(MAT_DIALOG_DATA) public data: any
    ) {}

    ngOnInit(): void {
        this.hh = this.data;
        console.log(this.hh);
        // 默认变更检测策略下，无需手动调用detectChanges
    }

    closePopup(): void {
        this.dialogRef.close();
    }
}

模板保持原有代码即可正常渲染数据。

额外排查点 #

• 检查组件是否设置了changeDetection: ChangeDetectionStrategy.OnPush，如果是这种情况，需要确保数据引用发生变化，或者在必要时手动触发变更检测（但你的场景默认应该是Default策略，大概率不需要）。
• 再次确认rowData.crid确实存在有效值，虽然alert能显示，但可以在控制台打印data.message的具体内容，确保数据格式正确。

内容的提问来源于stack exchange，提问作者Lakshmi Sureshan