我已经实现了一个子组件，用于根据@Input（）提供的列表呈现一个表。数据是通过http加载的，但是UI（子组件）不会更新，除非我在屏幕上挥动鼠标。我看到有人在我的孩子身上实现ngOnChanges（），但我认为Angular应该默认做到这一点？我错过什么了吗？为什么UI不更新呢？
子代码看起来像这样：

child.component.ts

@Component({
  selector: 'child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss'],
})
export class ChildComponent implements {
  @Input() data: any[] = [];
  constructor() {}
}

child.component.html

<table>
  <tr *ngFor="let item of data"><td>{{ item }}</td></tr>
</table>

使用组件的父代码看起来像这样：

parent.component.ts

@Component({
  selector: 'parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss'],
})
export class ParentComponent implements OnInit {
  data: string[] = [];

  constructor(private endpointService: EndpointService) {}

  ngOnInit() {
    // response is a string array like: ['hello', 'world']
    this.endpointService.loadData().subscribe((response) => {
      this.data = response;
    });
  }
}

parent.component.html

<child [data]="data"></child>

==========================编辑==============================

我验证了只有在subscribe回调中更新时才会加载失败（如果我设置了一个静态数组，它加载得很好）。
所以看起来我可以通过在父组件中运行changeDetectorRef.detectChanges（）来解决这个问题，但这感觉有点像我不应该这样做。这是解决问题的好办法吗？或者这是否表明我的实现有问题？

parent.component.ts

@Component({
  selector: 'parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss'],
})
export class ParentComponent implements OnInit {
  data: string[] = [];

  constructor(private endpointService: EndpointService,
              private changeDetectorRef: ChangeDetectorRef) {}

  ngOnInit() {
    // response is a string array like: ['hello', 'world']
    this.endpointService.loadData().subscribe((response) => {
      this.data = response;
      this.changeDetectorRef.detectChanges();
    });
  }
}