看起来你遇到的问题有点棘手——明明ngOnChanges里已经打印出正确的invoiceId，但点击按钮触发onEdit时却变成null，模板也没更新。我来帮你分析几个可能的原因和解决办法：

一、先排查父组件的数据传递方式 #

首先要确认父组件在获取到API数据后，是重新赋值一个新对象给invoiceData，而不是直接修改现有对象的内部属性。举个例子：

父组件里正确的写法：

// 假设这是父组件获取数据的代码
async fetchInvoice() {
  const fetchedData = await this.apiService.getInvoice();
  this.invoiceData = fetchedData; // 重新赋值新对象，确保触发变更
}

如果父组件是这样写的就容易出问题：

// 不推荐：直接修改现有对象的属性
this.invoiceData.invoiceGenInfo = fetchedData.invoiceGenInfo;

虽然Angular默认的变更检测能检测到属性变化，但如果你的子组件用了ChangeDetectionStrategy.OnPush，这种方式不会触发ngOnChanges。即便没用OnPush，有时候也会导致变更检测不及时。

二、用Setter替代ngOnChanges试试 #

有时候ngOnChanges的处理逻辑会因为变更顺序的问题出现奇怪的bug，换成@Input的setter写法会更直观，也能避免这类问题：

修改你的子组件代码：

import { Component, Input } from '@angular/core';

// 建议先定义接口强类型化，避免属性访问错误
interface Invoice {
  id: string;
}

interface InvoiceGenInfo {
  invoice: Invoice;
}

interface InvoiceData {
  invoiceGenInfo: InvoiceGenInfo;
}

@Component({
  selector: 'app-invoice',
  templateUrl: './invoice.component.html',
  styleUrls: ['./invoice.component.css']
})
export class InvoiceComponent {
  invoiceId: string | null = null;

  private _invoiceData: InvoiceData | null = null;

  @Input() 
  set invoiceData(data: InvoiceData | null) {
    this._invoiceData = data;
    if (data) {
      // 这里可以安全访问属性，因为接口已经定义了结构
      this.invoiceId = data.invoiceGenInfo.invoice.id;
      console.log("Updated invoiceData:", this.invoiceId);
    }
  }

  get invoiceData(): InvoiceData | null {
    return this._invoiceData;
  }

  onEdit(): void {
    console.log("Invoice Data in Edit:", this.invoiceId);
  }
}

这种写法会在父组件每次更新invoiceData时立即执行赋值逻辑，比ngOnChanges更直接。

三、检查变更检测是否需要手动触发 #

如果你的子组件设置了ChangeDetectionStrategy.OnPush（虽然你没写，但可能父组件或者模块里全局设置了），那即便数据更新了，Angular也不会自动触发变更检测。这时候需要手动调用：

首先注入ChangeDetectorRef：

import { Component, Input, OnChanges, SimpleChanges, ChangeDetectorRef } from '@angular/core';

// ... 其他代码

constructor(private cdr: ChangeDetectorRef) {}

ngOnChanges(changes: SimpleChanges): void {
  if (changes['invoiceData'] && changes['invoiceData'].currentValue) {
    this.invoiceId = this.invoiceData?.invoiceGenInfo?.invoice?.id;
    console.log("Updated invoiceData:", this.invoiceId);
    // 手动触发变更检测，让视图和组件变量同步
    this.cdr.detectChanges();
  }
}

四、排查模板绑定的问题 #

最后检查一下模板里的按钮绑定是否正确，确保是这样写的：

<button (click)="onEdit()">编辑发票</button>

不要写成(click)="onEdit"（少了括号），也不要用bind(this)之类的写法，否则可能会导致this上下文丢失，onEdit里访问的不是当前组件的invoiceId。

按照上面的步骤排查，应该能解决你的问题。如果还是不行，可以检查一下父组件是否在某些情况下把invoiceData又重置为null了，或者是否存在多个app-invoice组件实例，你点击的是没拿到数据的那个实例。

备注：内容来源于stack exchange，提问作者Abrew Abraham Alex