[英]angular4 local variable issue for *ngFor
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. 我通过使用localvariable来实现了该方案,该方案可以很好地处理一个项目,但是当我们有多个项目时,它不起作用。 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. 假设我有3个itemList,如果我们单击第一个项目fileupload按钮并上传文件,它将加载文件名并验证按钮,但是如果我们对第二个项目执行相同的过程(在第一个过程之后),则在文件上传之后,第一个文件名将被修改。
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
而不是@ViewChild
@ViewChildren("fileInput") fileInput : QueryList<any>;
@ViewChildren("validateContent") validateContent : QueryList<any>;
@ViewChildren("fileName") fileName : QueryList<any>;
And change function txtUploadFile to 并将函数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;
}
Here is the link of working example : 这是工作示例的链接:
https://stackblitz.com/edit/angular-view-children https://stackblitz.com/edit/angular-view-children
Extra Notes : 额外注意事项:
@ViewChild: @ViewChild:
You can use ViewChild to get the first element or the directive matching the selector from the view DOM. 您可以使用ViewChild从视图DOM中获取与选择器匹配的第一个元素或指令。 If the view DOM changes, and a new child matches the selector, the property will be updated. 如果视图DOM更改,并且有一个新的子项与选择器匹配,则该属性将被更新。
@ViewChildren: @ViewChildren:
You can use ViewChildren to get the QueryList of elements or directives from the view DOM. 您可以使用ViewChildren从视图DOM获取元素或指令的QueryList。 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. 每当添加,删除或移动子元素时,查询列表都将更新,并且查询列表中可观察到的更改将发出新值。
Eliseo is right you should get index value instead of 0. That's why. Eliseo是正确的,您应该获取索引值而不是0。这就是为什么。 To show and hide a div, you must create a class variable like showInfo = null by default and set it with the file array value. 要显示和隐藏div,默认情况下必须创建一个类似showInfo = null的类变量,并将其设置为文件数组值。
Change the value when the use click on the download button using <button (click)="showInfo=item[index]"/>
Then in your HTML use 使用时更改值,使用<button (click)="showInfo=item[index]"/>
下载按钮,然后在HTML中使用
<a [class.hidden]="!showInfo">Download {{item.name}} </a>
which display the info if existing 如果存在则显示信息
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.