Angular *ngFor循环中的多输入文件存在问题

当它在*ngFor循环中时，我很难找到正确的输入。当我添加带有第一个输入（Certificate Dimatriculation）的图像时，我会显示一个占位符图像和一个删除按钮来重置输入（这可以工作），但它会显示在两个div下

我想只针对我添加实际图像的输入。我确实有一个孩子，但我似乎不能让它工作

下面是代码：

<div class="files">
     <div class="single-file" *ngFor="let file of files">
          <h5>{{file.title}}</h5>
          <input type="file" name="file" id="{{file.slug}}" class="inputfile" #fileInput (change)="addFile(fileInput.files[0])" />
          <label for="{{file.slug}}" *ngIf="!hasFile || isDeleted">
          <img class="d-none d-xl-inline-block" src="assets/images/addImg.png" alt="">
          Ajouter votre photo
          <img class="d-block d-xl-none" src="assets/images/addImg_big.png" alt="">
     </label>
     <div class="placeholder" *ngIf="hasFile && !isDeleted">
          <img [src]="imageUrl" />
      </div>
      <div class="deleteImg" *ngIf="hasFile && !isDeleted" (click)="deleteFile()">
          <div class="btn btn-outline"><img src="assets/images/delete-x-icon.png" alt="Supprimer">Supprimer</div>
          </div>
     </div>
</div>

---

您目前的问题是，您正试图通过使用组件级属性来管理单个

文件
属性。我建议使用文件属性来存储上传的图像数据。然后，所有操作的作用域都是
文件
实例

为了演示的目的，我简化了您的代码示例，并帮助您了解我采取的方法

我在单个文件上使用名为
imageUrl
的属性来存储上载的图像数据url。此属性中存在值表示已上载图像。删除图像时，该属性将被清除

component.html


{{file.title}
Ajouter votre照片
供给者

所有操作现在都在单个
文件
对象上执行，并且需要传递给事件处理程序。您也可以使用数组索引代替对象引用

文件
实例和从输入上传的文件之间可能存在一些混淆。如果可能，我建议将
文件
和
文件
变量重命名为其他变量，并在处理文件输入时保留
文件

组件。ts

addFile（文件、事件）{
const upload=event.target.files[0]；
如果（！上传）{
返回；
}
const reader=new FileReader（）；
reader.onload=（）=>{
file.imageUrl=reader.result；
};
reader.readAsDataURL（上传）；
}
删除文件（文件）{
file.imageUrl=“”；
}

演示：
我不太明白您在这里想要实现什么。
文件如何填充？您的组件代码中没有包含
文件
。是的-
文件
在哪里？@KurtHamilton我在我的.ts中有它，并将它添加到我的问题中
file: File;
imageUrl: string | ArrayBuffer = '../app/assets/images/imgAdded.png';
hasFile = false;
isDeleted = false;

@ViewChild('fileInput', { static: false }) myFileInput: ElementRef;

files: any = [{
    'title': 'Certificat dimmatriculation',
    'slug': 'immatriculation',
    'input': '#fileInput1'
}, {
    'title': 'Preuve dassurance',
    'slug': 'insurance',
    'input': '#fileInput2'
}];

addFile(file: File) {
    if (file) {
        this.hasFile = !this.hasFile;
        // this.fileName = file.name;
        this.file = file;

        const reader = new FileReader();
        reader.readAsDataURL(file);

        reader.onload = event => {
            this.imageUrl = this.imageUrl;
            // this.imageUrl = reader.result;
        };
    }
}

deleteFile() {
    this.isDeleted = !this.isDeleted;
    this.myFileInput.nativeElement.value = '';
}