Angular中向子组件传递JSON对象显示[Object Object]问题

Hey there, let's fix the issue where your Display component is logging [object Object] instead of the actual transaction data! Here are the key problems and solutions:

1. 字符串拼接把对象转成了通用字符串格式 #

在你的DisplayComponent的hello()方法里，你用模板字符串把文本和交易数据拼在了一起：

hello(){ console.log(`data ${this.address}`); }

在JavaScript里，当你把对象/数组和字符串直接拼接时，会自动调用对象的toString()方法。对于对象数组来说，这个默认方法只会返回[object Object]，不会展示具体内容。

解决办法：
要么直接打印对象本身，要么用JSON.stringify()把对象转成人类可读的字符串：

// 方案1：直接打印对象（在开发者工具里调试最方便）
hello(){ console.log("data:", this.address); }

// 方案2：转成格式化的JSON字符串
hello(){ console.log(`data:\n${JSON.stringify(this.address, null, 2)}`); }

2. 修正易混淆的输入属性命名（可选但推荐） #

现在你从Input组件把transactions数组传给Display组件的address输入属性：

<app-display [address]="transactions"></app-display>

这个命名很容易让人混淆——address听起来是单个字符串，但你传的是交易记录数组。我们可以把它改得更清晰：

修改display.ts： #

export class DisplayComponent implements OnInit {
  // 把输入属性名改成和接收的数据对应
  @Input() transactions = [];

  constructor(private blockchain: BlockchainService) { }

  ngOnInit() { }

  hello(){ console.log("data:", this.transactions); }
}

修改Input.html里的组件调用： #

<app-display [transactions]="transactions"></app-display>

额外优化：确保捕获数据更新 #

Angular的@Input()会在父组件的值变化时自动更新，但如果你需要在交易数据更新时执行特定代码，可以用ngOnChanges钩子：

import { OnInit, OnChanges, SimpleChanges } from '@angular/core';

export class DisplayComponent implements OnInit, OnChanges {
  @Input() transactions = [];

  ngOnChanges(changes: SimpleChanges) {
    if (changes['transactions']) {
      console.log("更新后的交易数据:", changes['transactions'].currentValue);
    }
  }

  ngOnInit() { }

  hello(){ console.log("data:", this.transactions); }
}

做完这些调整后，你就能在Display组件的控制台日志里看到完整的交易数据啦！

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