如何在 Angular 中使用多个 ViewChild 元素 (2/4)

Question

我已经按照 https://devblog.dymel.pl/2016/09/02/upload-file-image-angular2-aspnetcore/ 上传单个文件并且工作正常。

现在我想根据数组中元素的数量上传动态文件数量documentTypes[]。

我的HTML:

<div *ngFor="let item of documentTypes ;let i=index">
  <input #fileInput[i] type="file" #select name="document[{{i}}]" />
</div>

我的学生：

@ViewChild("fileInput") fileInput: any[];

提交函数：

onSubmit = function (docs) {
  for (var i = 0; i < this.documentTypes.length; i++) {
    let fi = this.fileInput[i].nativeElement;
    //This  is not working. Here fileInput is undefined
  }
};

如有任何建议，我们将不胜感激。

Answer 1

@ViewChild 装饰器仅适用于一个 child。要获得 children 数组，您需要使用 @ViewChildren

如何在 Angular 中使用多个 ViewChild 元素 (2/4)

How to use multiple ViewChild element in Angular (2/4)

file-upload

angular2-forms

angular