Angular中@Input数据控制台可打印但模板不显示，需在OnInit获取

看起来你的核心问题出在模板引用的tableData并不是组件的可访问属性——你用了setter形式的@Input，但只定义了setter方法，没有对应的实例属性或getter，导致模板找不到tableData变量，哪怕totalRows已经被正确赋值，也会因为*ngIf="tableData"不成立而被隐藏。

下面是具体的解决方案，以及关于OnInit中获取@Input数据的补充说明：

方案1：改用已定义的tableDataShow做判断 #

既然你在setter里已经把输入值同步到了tableDataShow，直接用它来做模板判断是最直接的方式：

<!-- foo-child.html 修改后 -->
<div class="block50 result-no">10 条，共 <span *ngIf="tableDataShow">{{totalRows}}</span> 条结果</div>

这样当tableDataShow有值时，就会正常显示totalRows，完全匹配你setter里的逻辑。

方案2：给tableData添加getter，让模板可访问 #

如果你坚持想在模板里用tableData做判断，可以给这个输入属性补充私有变量和getter：

// foo-child.ts 修改后
private _tableData: any[]; // 私有变量存储实际输入值

@Input('tableData') set tableData(tableData) {
  if (tableData) {
    this._tableData = tableData; // 将值存入私有变量
    this.tableDataReceived = this.tableDataShow = tableData;
    this.totalRows = this.tableDataShow.length;
  }
}

// 添加getter，让模板能访问到tableData
get tableData() {
  return this._tableData;
}

修改后模板里的*ngIf="tableData"就能正确识别输入值了。

关于在OnInit中获取@Input数据的补充 #

因为父组件用了*ngIf="tableData"，只有当数据存在时才会渲染子组件，所以子组件初始化（OnInit钩子执行）时，setter已经被触发过，tableDataShow和totalRows都已经有值。如果你想在OnInit里做额外处理，比如加工数据，直接访问this.tableDataShow即可：

ngOnInit() {
  // 这里可以安全使用this.tableDataShow，父组件的*ngIf确保了数据已准备好
  console.log('OnInit中获取到的数据:', this.tableDataShow);
}

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