angular - 如何在标签中显示所选文件而不是角度6中的输入标签

Question

我应该在标签标签中显示选定的文件名，而不是在输入标签中显示。你能帮我实现这一目标吗？提前致谢

我的代码如下所示，

<div *ngFor='let item of list; let i = index'>
  <input #fileInput type="file"  />
  <button type="button" (click)="fileInput.click()">trigger</button>
  <button type="button" (click)="reset(fileInput, i)">Reset</button>
</div>

我尝试将输入标签更改为标签，但它不起作用。你能帮我实现它吗？提前致谢。

标签： angulartypescript

Answer 1

试试这个代码。我希望它会对你有所帮助。

HTML：

 <div>
        <div>
            <input #fileInput type="file" (change)="fileProgress($event)" />
            <button type="button" (click)="fileInput.click()">trigger</button>
            <button type="button" (click)="reset(fileInput, i)">Reset</button>
        </div>
        <span *ngIf="fileName">{{fileName}}</span>
    </div>

TS：

fileProgress(fileInput: any) {
    let file = fileInput.target.files[0];
     this.fileName = file.name;
    console.log(this.fileName)
}