* ngFor的angular4局部变量问题 [英] angular4 local variable issue for *ngFor
问题描述
我有一个要求,我必须使用项目列表加载多个项目.无论何时上传文件,上传文件输入都必须隐藏,并且该文件的详细信息必须显示,例如文件名和其他按钮.
我通过使用localvariable来实现了该方案,它可以很好地处理一个项目,但是当我们有多个项目时,它不起作用. 假设我有3个itemList,如果我们单击第一项fileupload按钮并上传文件,它将加载文件名并验证按钮,但是如果我们对第二项执行相同的过程(在第一过程之后),则在文件上传之后,第一文件名将被修改
查看:
<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;
}
}
我感觉局部变量给了问题,但不知道如何解决.谁能帮我. 预先感谢
所有您需要做的就是使用@ViewChildren
代替@ViewChild
@ViewChildren("fileInput") fileInput : QueryList<any>;
@ViewChildren("validateContent") validateContent : QueryList<any>;
@ViewChildren("fileName") fileName : QueryList<any>;
并将txtUploadFile函数更改为
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;
}
这是工作示例的链接:
https://stackblitz.com/edit/angular-view-children
附加说明:
@ViewChild:
您可以使用ViewChild获取第一个元素或指令 匹配视图DOM中的选择器.如果视图DOM更改,并且 一个新的子项与选择器匹配,该属性将被更新.
@ViewChildren:
您可以使用ViewChildren获取元素的QueryList或 DOM中的指令.每当添加子元素时, 删除或移动,查询列表将被更新,并且更改 可观察到的查询列表将发出一个新值.
I have a requirement where I have load multiple items using item list. Whenever you upload a file, upload file input has to hide and details of that file has to show like filename and other button.
I implemented the scenario by using a localvariable, it works fine with one item, but when we have multiple items, its not working. Assume if I have 3 itemList, if we click on 1st item fileupload button and upload a file, it loads filename and validate button, but if we do same process for 2nd item (after 1st process), after fileupload, 1st filename will be modified.
View:
<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>
My component look like:
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;
}
}
I feel local variable is giving problem,but don't know how to fix it. can anyone help me. Thanks in advance
All you need to do is use @ViewChildren
instead of @ViewChild
@ViewChildren("fileInput") fileInput : QueryList<any>;
@ViewChildren("validateContent") validateContent : QueryList<any>;
@ViewChildren("fileName") fileName : QueryList<any>;
And change function txtUploadFile to
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;
}
Here is the link of working example :
https://stackblitz.com/edit/angular-view-children
Extra Notes :
@ViewChild:
You can use ViewChild to get the first element or the directive matching the selector from the view DOM. If the view DOM changes, and a new child matches the selector, the property will be updated.
@ViewChildren:
You can use ViewChildren to get the QueryList of elements or directives from the view DOM. Any time a child element is added, removed, or moved, the query list will be updated, and the changes observable of the query list will emit a new value.
这篇关于* ngFor的angular4局部变量问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!