angular4ローカル変数の問題* ngFor

Question

私はアイテムリストを使用して複数のアイテムをロードする必要があります。ファイルをアップロードするたびに、アップロードファイルの入力を非表示にして、そのファイルの詳細をファイル名やその他のボタンのように表示する必要があります。

私はlocalvariableを使ってシナリオを実装しましたが、1つのアイテムでうまく動作しますが、複数のアイテムがある場合は動作しません。 itemListが3つあると仮定して、1番目の項目fileuploadボタンをクリックしてファイルをアップロードするとファイル名がロードされ、検証ボタンが表示されますが、2番目の項目（1番目のプロセス以降）、fileuploadの後に1番目のファイル名変更されました。

ビュー：

<div id="userItemList" *ngFor="let item of itemList; let i=index"> 
    <div> 
     <span>{{item.Id}}</span> 
     <span>{{item.Name}}</span> 
     <span>{{item.Count}}</span> 
    </div> 
    <div> 
     <input type="file" name="UploadFile" id="fileInput" #fileInput (change)="txtUploadFile($event,i)"> 
     <div class="validate-file-div" #validateContent style="display:none"> 
      <div class="file-name" #fileName></div> 
      <span id="validate-csv-button" data-program-id="0" class="button">Validate</span> 
     </div> 
    </div> 
</div> 

私のコンポーネントの外観のように：

import { Component, OnInit, ViewChild } from '@angular/core'; 

@Component({ 
    selector: 'app-programs-manager', 
    templateUrl: './ProgramsManager.component.html', 
    styleUrls: ['./ProgramsManager.component.css'], 
}) 

export class ProgramsManagerComponent implements OnInit { 

    itemList = [{"Id":1,"Name":"Item1","Count":2},{"Id":2,"Name":"Item2","Count":2},{"Id":3,"Name":"Item3","Count":3}]; 
    @ViewChild("fileInput") fileInput; 
    @ViewChild("validateContent") validateContent; 
    @ViewChild("fileName") fileName; 

    constructor() { } 

    ngOnInit() { 
    } 

    txtUploadFile(event,index) { 
     this.fileInput.nativeElement.style.display = "none"; 
     this.validateContent.nativeElement.style.display = "block"; 
     this.fileInput.nativeElement.innerHTML = event.target.files[0].name; 
    } 
} 

私はローカル変数が問題を与えていると感じますが、それを修正する方法がわかりません。誰も私を助けることができます。あなたがする必要があるのではなく、ここで

txtUploadFile(event,index) { 
    var fileInputs = this.fileInput.toArray(); 
    var validateContents = this.validateContent.toArray(); 

    fileInputs[index].nativeElement.style.display = "none"; 
    validateContents[index].nativeElement.style.display = "block"; 
    fileInputs[index].nativeElement.innerHTML = event.target.files[0].name; 
} 

から@ViewChild

@ViewChildren("fileInput") fileInput : QueryList<any>; 
@ViewChildren("validateContent") validateContent : QueryList<any>; 
@ViewChildren("fileName") fileName : QueryList<any>; 

と変更機能txtUploadFileの@ViewChildrenを使用している事前

Answer 1

で おかげでは、実施例のリンクです：

https://stackblitz.com/edit/angular-view-children

---

エクストラ注：

@ViewChild：

あなたが最初の要素またはビューのDOMからセレクタに一致するディレクティブ を取得するためにViewChildを使用することができます。ビューDOMが変更され、 新しい子がセレクタに一致する場合、そのプロパティは更新されます。

@ViewChildren：

あなたは要素またはビューのDOMから ディレクティブのQueryListを取得するためにViewChildrenを使用することができます。子要素が追加されるたびに、 が削除または移動されると、クエリリストが更新され、クエリリストの変更可能な が新しい値を出力します。

Answer 2

Eliseoは、0の代わりにインデックス値を取得する必要があります。それが理由です。 divを表示および非表示にするには、デフォルトでshowInfo = nullのようなクラス変数を作成し、ファイル配列の値で設定する必要があります。