Angular 如何在标签中显示选定文件，而不是在6中显示输入标签

我应该在标签标签中显示选定的文件名，而不是在输入标签中显示。你能帮我做到这一点吗。提前谢谢

我的代码如下所示

<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>

触发
重置

我试着把输入标签改成标签，但不起作用。你能帮我实现吗。提前谢谢。

试试这个

这将显示所选文件的名称

在模板中

希望这能给你一个解决问题的想法：）

试试这个

这将显示所选文件的名称

在模板中

---

希望这能给你一个解决问题的想法：）

试试这段代码。我希望它能帮助你

HTML:

---

试试这个代码。我希望它能帮助你

HTML:

• 您可以隐藏输入并使用标签将其包装
• 使用[（ngModel）]将变量绑定到输入

然后在任何标记中使用此getter，如

{{fileName}

• 您可以隐藏输入并使用标签将其包装
• 使用[（ngModel）]将变量绑定到输入

---

然后在任何标记中使用此getter，如

{{fileName}

谢谢您的响应。我使用的是被动表单，因此ngModel不能用于向父表单组方向注册表单控件感谢您的响应。我使用的是被动表单，因此ngModel不能用于向父表单组方向注册表单控件感谢您的响应。它对我有效，但在我为特定行选择文件后，它会在所有标签上显示相同的文件名。@Olive使用索引值解决此问题，我已为响应更新了答案chek It onceThanks。它对我有效，但在我为特定行选择文件后，它会在所有标签上显示相同的文件名。@Olive使用索引值解决此问题，我已为响应更新了答案chek It onceThanks。它对我有效，但在我为特定行选择文件后，它会在所有标签上显示相同的文件名。你可以使用for循环。谢谢你的回复。它对我有效，但在我为特定行选择文件后，它会在所有标签上显示相同的文件名。您可以使用for循环来实现这一点。

<div *ngFor='let item of list; let i = index'>
  <span *ngIf="selectedLogoFile[i]">{{selectedLogoFile[i].name}}</span>
  <input style="display: none" type="file" (change)="onFileChanged($event,i)" #fileInput>
  <button type="button" (click)="fileInput.click()">trigger</button>
  <button type="button" (click)="reset(fileInput, i)">Reset</button>
</div>

  selectedLogoFile: File[]= [];

  onFileChanged(event: any,index: any) {
    this.selectedLogoFile.push(event.target.files[i]);
    console.log(this.selectedLogoFile[i].name);
  }

 <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>

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

<label> {{fileName}}
  <input #fileInput type="file" [(ngModel)]="selectedFile" [style.display]="'none'">
</label>

get fileName(): string {
  return this.selectedFile ? this.selectedFile.split('/').pop() : 'Select file';
}