Html 子组件向父组件发出的事件的奇怪行为

我正在使用EventEmitter从子组件向父组件发送URLMeages数组

儿童发射器：

@Output() images  = new EventEmitter<string[]>();

控制台输出：

为什么

images[0]

会给出

未定义的
当我在控制台输出中看到它有数据时，我如何访问
images:string[]
数据

编辑：

@Output() images  = new EventEmitter<string[]>();

@科尔比·亨特（Colby Hunter）作为对评论的回答，以下是《儿童》的内容：


@组件({
选择器：“应用程序文件上载”，
templateUrl:“./file upload.component.html”，
样式URL:['./文件upload.component.css']
})
导出类FileUploadComponent实现OnInit{
LoadeImage URL=[]；
@Output（）images=neweventemitter（）；
构造函数（）{
}
恩戈尼尼特（）{
}
选举（事件）{
const filesList=event.target.files；
for（文件列表的常量文件）{
const reader=new FileReader（）；
reader.onload=（e:any）=>{
this.loadedImagesUrl.push（e.target.result）；
};
reader.readAsDataURL（文件）；
}
this.images.emit（this.loadedImagesAsURL）；
}
}

维比尔兹·兹德希亚
浏览器的控制台执行惰性评估。试着做：

console.log(JSON.stringify(images));
console.log(images[0]);

您将看到它是一个空数组

在您的情况下，当您手动单击控制台日志“images”时，文件将被加载，您将看到内容

因为您需要读取所有文件并进行最终发射，所以将所有文件读取事件作为可观察事件，
完成所有观测值后发射阵列

public onFileSelected(event): void {
    let loadenedObs = this._createFileReaderObs(event);
    forkJoin(...loadenedObs).subscribe(() => {
        // all the files are read, emit the array now.
        this.images.emit(this.loadedImagesAsURL);
   })
}

private _createFileReaderObs(event): [] {
    let obsArr = [];
    const filesList = event.target.files;
    for (const file of filesList) {
      const reader = new FileReader();

      const loadenedEventObs = fromEvent(reader, 'loadend').pipe(
            tap(() => {
                this.loadedImagesAsURL.push(reader.result);
            }),
            take(1)      // take one event to complete the Observable
        );

      obsArr.push(loadenedEventObs);    // create an array of loadened observables.
      reader.readAsDataURL(file);
    }
    return obsArr;
}

浏览器的控制台执行延迟计算。试着做：

console.log(JSON.stringify(images));
console.log(images[0]);

您将看到它是一个空数组

在您的情况下，当您手动单击控制台日志“images”时，文件将被加载，您将看到内容

因为您需要读取所有文件并进行最终发射，所以将所有文件读取事件作为可观察事件，
完成所有观测值后发射阵列

public onFileSelected(event): void {
    let loadenedObs = this._createFileReaderObs(event);
    forkJoin(...loadenedObs).subscribe(() => {
        // all the files are read, emit the array now.
        this.images.emit(this.loadedImagesAsURL);
   })
}

private _createFileReaderObs(event): [] {
    let obsArr = [];
    const filesList = event.target.files;
    for (const file of filesList) {
      const reader = new FileReader();

      const loadenedEventObs = fromEvent(reader, 'loadend').pipe(
            tap(() => {
                this.loadedImagesAsURL.push(reader.result);
            }),
            take(1)      // take one event to complete the Observable
        );

      obsArr.push(loadenedEventObs);    // create an array of loadened observables.
      reader.readAsDataURL(file);
    }
    return obsArr;
}

就ts和HTML文件而言，您的子组件是什么样子的？就ts和HTML文件而言，您的子组件是什么样子的？@IngoBürk:对，我没有看到。谢谢更新了答案。谢谢你的帮助！但我对forkJoin部分有点困惑，因为当我插入console.log（'foobar'）；在subscribe（）中发出之前，它不会被记录。我应该添加一些东西来启动吗？\u createFileReaderObs（）为我上传的每个图像返回一个观察值数组，但感觉obsArr中的这些观察值永远不会完成。是我遗漏了什么还是forkJoin从未执行的原因？@hdw3:是的，请检查编辑，我添加了一个
take（）
操作符，一旦发生一个
loadend
事件，这将完成每个观察。@IngoBürk:是的，我遗漏了那个。谢谢更新了答案。谢谢你的帮助！但我对forkJoin部分有点困惑，因为当我插入console.log（'foobar'）；在subscribe（）中发出之前，它不会被记录。我应该添加一些东西来启动吗？\u createFileReaderObs（）为我上传的每个图像返回一个观察值数组，但感觉obsArr中的这些观察值永远不会完成。是我遗漏了什么还是forkJoin从未执行的原因？@hdw3：好的，请检查编辑，我添加了一个
take（）
操作符，一旦发生一个
loadend
事件，这将完成每个观察。