@Input setter 不更新视图数据答案

【问题标题】：@Input setter not updating view data@Input setter 不更新视图数据
【发布时间】：2022-07-01 23:47:16
【问题描述】：

在我的 Angular 6 应用程序中，我从存储选择器获取数据，该存储选择器又使用效果从 API 获取数据，然后从父组件中，我将该数据作为异步管道注入到子组件中，如下所示：

<chart-data 
[tableData]="data | async">
>

子组件实现：

  public chartData: any[];
  // input setter
 @Input() set tableData(
    value: tableData[];
  ) {
    if (value.length > 0) {
      this.chartData = value;
    }
  }

子组件模板

{{tableData | json}}
<section class="chart-container" *ngIf="chartData?.length > 0">
    <div>
     {{chartData| json}}
    </div>
    </section>

如果我打印 JSON 响应，数据在我在这里检查长度之前就来了，但是在 if 条件之后它不会打印数据，这是因为我使用了相同的对象还是我需要在渲染之前创建一个副本到模板？

【问题讨论】：

我认为您应该在子组件模板中将tableData 替换为chartData，或者创建一个getter 来将chartData 检索为tableData，如answer。跨度>
抱歉打错了我修改了上面的代码，但即使它不起作用
您应该在子组件模板中将所有tableData 替换为chartData。
哦，对不起，这也是错字，对不起，但即使它不起作用

标签： angular

【解决方案1】：

嗯.. 我不使用带有 @Input 装饰器的设置器。或许可以尝试利用 ngOnChanges 生命周期挂钩。

@Input tableData;

ngOnChanges(changes: SimpleChanges): void {
    if (changes.tableData?.length) {
        this.chartData = this.tableData;
    }
}

【讨论】：

【解决方案2】：

问题是对象是一个数组，你需要改变数组的引用才能重新触发setter。

【讨论】：