html - Angular 绑定(bind)到文件输入字段的选择？

Question

我有一个简单的上传表单，想将显示的文件名绑定(bind)到文件输入字段的值 <input type="file"> ，但出于某种原因，它总是显示一些虚拟文件路径。如何改进绑定(bind)以使其不具有此行为(仅文件名，如 selected.files[0].name )？

理想情况下，所选文件名将显示在 #selected 的标签中操作系统文件选择器完成后立即执行。我的另一种方法包含在评论中 ( *ngIf )，但它也不起作用。

<form>
    <div class="justify-content-center">
        <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">Select image</span>
      </div>
            <div class="custom-file">
                <input type="file" accept="image/*" class="custom-file-input" id="selected" #selected (click)="message=''" >
        <label class="custom-file-label" for="selected">{{ selected.value }}</label>
<!--
        <div *ngIf="selected.files[0].name; then showFilename else showDefaultMsg"></div>
        <ng-template #showFilename>
        <label class="custom-file-label" for="selected">{{ selected.files[0].name }}</label>
        </ng-template>
        <ng-template #showDefaultMsg>
          <label class="custom-file-label" for="selected">Choose file....</label>
        </ng-template>
-->
            </div>
        </div>
    <button [disabled]="!selected.value" id="uploadBtn" class="btn btn-primary" (click)="onUpload(selected)">Upload</button>
        <div class="text-center" *ngIf="message">
            <div class="spinner-border" role="status">
                <span class="sr-only">Loading....</span>
            </div>
            <div>{{ message }}</div>
        </div>
    </div>
</form>

谢谢

Answer 1

我不相信您可以像那样引用值并进行更改。 selected是一个 HTMLInputElement ，不是 Observable<HTMLInputElement>或任何其他将在变化时发出值(value)的东西。

在下面的示例中，您会看到带有文本框的相同设置显示了您在页面加载时所期望的内容，但实际上并没有对输入值进行任何更改。

StackBlitz here

您需要使用 ngModel , FormControl ，或者只是为 change 创建一个事件事件。

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  fileName = null;

  onFileChange(evt): void {
    this.fileName = evt.target.files[0].name;
  }
}

模板

<hello name="{{ name }}"></hello>
<input type="text" #myInput value="Init Text" />
<div>Input Text: {{myInput.value}}</div>
<input type="file" (change)="onFileChange($event)" />
<div>name: {{fileName}}</div>