Angular框架中的父子组件通信传递异步的数据接收值异常的问题(Async Data)

Posted 2023-03-18

参考技术A 父组件传递给子组件的值为 async data 异步数据，子组件接收的过程中可能就会出现问题，子组件接收不到父组件传递过来的值，此时视图也无法进行渲染。

根据结果来看，子组件并未接收到，获取的值是一个空数组。

父组件User组件：

如果想在模板中直接使用的话，可以使用 AsyncPipe 。
在实际的开发场景中，需要参考业务层的应用方式，如果数据源只产生一次或者很少的次数的变化，那么可以直接考虑使用 *ngIf 指令，即当父组件异步数据获取到的时候才进行子组件的加载。如果是持续不断的改变，那么需要使用以上的方法去解决异步导致数据源无法获取的问题。