Question

每次导入某个文件时，如何在表格中输入文件名？

我有输入和按钮，点击该输入时实际启动事件。

<button class="btn-main" (click)="ElementFileInput.click()">Import </button> <input #ElementFileInput (change)="importElement($event)" type="file" " style="width: 0px; height: 0px; overflow: hidden;" />

另外，在我的ts中，我已经定义了该函数，并从文件中提取了名称值。

TS功能：

importElement(event: any) {

    this.values = event.target.files[0].name;

我显示文件名的html部分：

<label style="color: blue">{{values}}</label>

功能正在运行，当我输入文件时，我得到了用标签写的名字。

但我想创建一个表，列出我导入的每个文件的文件名，而不只是一次。我怎么能这样做？

Answer 1

您可以在组件类中添加成员变量，以将值推送到：

files: Array<string> = [];

在导入方法中，只需在数组上调用push：

importSeabed(event: any) {

    this.files.push(event.target.files[0].name);

这样，文件名将被添加到数组中，而不是替换您的变量。

要显示列表，您需要ngFor指令：

<label style="color: blue" *ngFor="let file of files">{{file}}</label>

Answer 2

您的importSeabed()函数可以在每次执行时将文件名添加到数组中。然后，您可以使用组件模板中的*ngFor表达式为数组中的每个值添加新的表元素。

有关详细信息，请参阅the Angular documentation。

将输入值添加到表 - Angular 2

2 个答案: