OnChange打字稿输入

Question

我希望能够在从输入（文件）中选择文件时触发打开更改。我想要触发的事件将文本框设置为文件的名称。

我正在使用HTML5，Typescript和Angular2。我无法弄清楚或找到一个如何产生我所追求的行为的例子。

看到我的代码如下：

component.ts

import { Component } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { Headers, RequestOptions } from '@angular/http'; 

@Component({ 
    selector: 'testConnection', 
    // ignore error on require 
    template: require('./testConnection.component.html') 
}) 
export class TestConnectionComponent { 
    public http: Http; 
    public requestData: RequestData; 


    public constructor(http: Http) { 
     this.http = http; 

     (<HTMLInputElement>document.getElementById('fileInput')).onchange = (ev: Event) => { 
      var fileInput = (<HTMLInputElement>ev.srcElement).files[0]; 

      var fileTextbox = (<HTMLInputElement>document.getElementById('fileTextbox')); 
      fileTextbox.value = fileInput.name; 
     } 
    } 


    public testButtonClick() { 

     // Iniatialise Request object 
     let request: RequestData; 
     request = { "CountryCode": "", "SiteIDList": "" }; 

     // Get site(s) 
     var siteIdList = (<HTMLInputElement>document.getElementById('siteIDInput')).value; 

     // Get selected country 
     var countryCode = (<HTMLInputElement>document.getElementById('countryDropdown')).value; 

     // Veryify contents is just site ids. 
     // TODO 
     request.CountryCode = countryCode; 
     request.SiteIDList = siteIdList; 


     // Set Http POST options 
     let headers = new Headers({ 'Content-Type': 'application/json' }); 
     let options = new RequestOptions({ headers: headers }); 

     // Call Api with test connection data 
     this.http 
      .post('/api/TestConnection/TestConnection', JSON.stringify(request), options) 
      .subscribe(data => { 
       // alert request ok 
       alert('ok'); 
      }, error => { 
       // Log error 
       console.log(error.json()); 
      }); 
    } 
} 

interface RequestData { 
    SiteIDList: string; 
    CountryCode: string; 
} 

component.html

<h2>Test Site Connection</h2> 

<p>This will allow you to check the connectivity of a set of sites by either individually or uploading a CSV file of Site IDs.</p> 
<br /> 
<div class="panel panel-primary"> 
    <div class="panel-heading"> 
     <h3 class="panel-title">Manual Test</h3> 
    </div> 
    <div class="panel-body"> 
     <p> 
      Select the country and the sites you want to test. 
     </p> 
     <ul> 
      <li>Multiple sites can be selected using commas (,).</li> 
      <li>you can see results in the Site Connection Results tab</li> 
     </ul> 
     <br /> 
     <!--Replace with lookup to enabled countries--> 
     <div class="form-group col-lg-4"> 
      <div class="col-lg-6"> 
       <select class="form-control" id="countryDropdown"> 
        <option>Select Country</option> 
        <option>US</option> 
        <option>SG</option> 
        <option>NL</option> 
       </select> 
      </div> 
     </div> 
     <div> 
      <div class="col-lg-4"> 
       <input type="text" class="form-control" placeholder="SiteID(s)" id="siteIDInput" /> 
      </div> 
      <button class="btn btn-primary" (click)="testButtonClick()">Test</button> 
     </div> 
    </div> 
</div> 

<div class="panel panel-success"> 
    <div class="panel-heading"> 
     <h3 class="panel-title">Upload file</h3> 
    </div> 
    <div class="panel-body"> 
     <div> 
      <p>Upload a CSV file of sites to test all at once.</p> 
      <br /> 
      <div class="col-lg-4"> 
       <input type="text" class="col-lg-4 form-control" id="fileTextbox" disabled/> 
      </div> 
      <label class="btn btn-primary"> 
       Browse <input type="file" id="fileInput" style="display:none;" onchange="{ setFileName() }"/> 
      </label> 
      <button class="btn btn-primary" (click)="searchButtonClick()">Test</button> 
     </div> 
    </div> 
</div> 

<div class="modal"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Modal title</h4> 
      </div> 
      <div class="modal-body"> 
       <p>One fine body…</p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
     </div> 
    </div> 
</div> 

让我知道如果你需要更多的信息，在此先感谢。

Answer 1

如果需要之前检索文件名上传它，你可以这样来做尝试使用（其他城市）事件绑定

<input type="file" id="fileInput" style="display:none;" (change)="setFileName()"/> 

Answer 2

：

@Component({ 
    selector: 'my-app', 
    template: ` 
     <div> 
     <input type="file" (change)="onChange($event)"/> 
     </div> 
     <p>Filename : {{filename}}</p> 
    `, 
    providers: [] 
}) 
export class AppComponent { 
    filename: string; 
    constructor() { } 

    onChange(event) { 
    this.filename = event.srcElement.files[0].name; 
    } 
} 

这里是一个working plunker