*ngFor的angular4局部变量问题

Question

我有一个要求，我使用项目列表加载了多个项目。每当您上传文件时，上传文件输入都必须隐藏，该文件的详细信息必须显示，如文件名和其他按钮。

我使用局部变量实现了该场景，它适用于一个项目，但是当我们有多个项目时，它不起作用。假设如果我有 3 个 itemList，如果我们单击第 1 项文件上传按钮并上传文件，它会加载文件名和验证按钮，但是如果我们对第 2 项(在第一个进程之后(执行相同的过程，则在文件上传后，第一个文件名将被修改。

视图：

<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;
    }
}

我觉得局部变量有问题，但不知道如何解决。 谁能帮我。提前致谢

Answer 1

您

需要做的就是使用@ViewChildren而不是@ViewChild

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

并将函数 txt上传文件 更改为

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 获取元素的查询列表或 来自视图 DOM 的指令。任何时候添加子元素时， 删除或移动，查询列表将更新，更改 查询列表的可观察性将发出一个新值。

Answer 2

Eliseo 是对的，你应该得到索引值而不是 0。这就是原因。要显示和隐藏div，您必须创建一个类变量，例如 showInfo = null，并使用文件数组值对其进行设置。

使用

时更改值，单击下载按钮使用<button (click)="showInfo=item[index]"/> 然后在您的 HTML 中使用

<a [class.hidden]="!showInfo">Download {{item.name}} </a> 

显示信息(如果存在(