使用异步管道在html模板中显示事件发射器值

我有一个子组件,它选择一个名为file$的具有双向数据绑定的文件,这样父组件就可以接收所选文件。

父级需要在文件发出时接收文件,但子级还需要在模板中显示文件名。

由于某种原因,文件名没有显示在孩子的html模板中。这是为什么?我已经订阅了$event发射器文件,控制台记录了发出的值,这确实是一个文件。

在子组件.ts中:

@Output() public file$ = new EventEmitter<any>(true);

private setDocument(uploadedFile: File): void {
    if (this.isFilesizeValid && this.isFileExtensionValid) {
        this.file$.emit(uploadedFile);
        this.isFileValidAndUploaded = true;
    }
}

在child-component.html中:

<h4 class="cb-padding-bottom">{{file$.name | async}}</h4>

在父文件.html中:

      <cb-drag-and-drop-file fxFlex
                             [allowedFileTypes]="[FILE_TYPE_ENUM.Xlsx]"
                             [(file$)]="file">
      </cb-drag-and-drop-file>

在父文件.ts中:

public file;