Comment passez-vous les valeurs de l'objet itéré en html au composant dans Angular2/4?

Question

Je permet le téléchargement de fichiers sur S3 dans mon application Angular2/4. Il est configuré de sorte que lorsqu'un utilisateur télécharge dans un fichier, il va stocker sur un compartiment S3. Après le téléchargement, il montrera à l'utilisateur les fichiers téléchargés. Si elles ont accidentellement téléchargé le mauvais fichier, je voudrais permettre l'option de supprimer l'image avec le bouton qui va supprimer le fichier correspondant sur S3. J'ai la clé (nécessaire pour supprimer l'image sur S3) mais j'ai besoin d'aide pour la transmettre au composant. Je sais que l'utilisation d'entrées cachées ne fonctionnera pas. Je suppose que passer la clé pourrait fonctionner, mais il y a une chance que ça se casse puisque la clé se termine par une extension de fichier. Des pensées?

upload.component.html

<div *ngFor = "let file of files"> 
<td>{{ file.originalname }}</td> 
<td><img src="{{ file.location }}"></td> 
</div> 

Je dois passer {{file.key}} pour le composant en quelque sorte par un bouton de suppression.

upload.component.ts

import { Component, OnInit } from '@angular/core'; 
import { FileUploader } from 'ng2-file-upload'; 

const URL = 'http://localhost:6789/api/upload'; 

@Component({ 
    selector: 'app-upload', 
    templateUrl: './upload.component.html', 
    styleUrls: ['./upload.component.css'] 
}) 
export class UploadComponent implements OnInit { 
    public uploader:FileUploader = new FileUploader({url: URL}); 
    public hasBaseDropZoneOver:boolean = false; 
    public hasAnotherDropZoneOver:boolean = false; 

    // THIS GETS POPULATED WITH OBJECTS FROM S3 AFTER UPLOAD 
    public files:any; 

    public files_path: any; 

    public fileOverBase(e:any):void { 
    this.hasBaseDropZoneOver = e; 
    } 

    constructor(
    public _uploadService: UploadService 
) { } 

    ngOnInit() { 
    this.files = []; 
    this.files_path = []; 
    this.uploader.onCompleteItem = (item:any, response:any, status:any, headers:any) => { 
     response = JSON.parse(response) 
     this.files.push(response); 
     this.files_path.push(response.location); 
    } 
    } 

Answer 1

vous pouvez utiliser l'éther ceci:

<div *ngFor = "let file of files"> 
    <td>{{ file.originalname }}</td> 
    <td><img src="{{ file.location }}" (click)="delete(file)"></td> 
    </div> 

ou ceci:

<div *ngFor = "let file of files;let i = index"> 
<td>{{ file.originalname }}</td> 
<td><img src="{{ file.location }}" (click)="delete(i)"></td> 
</div> 

ou ce si le fichier a la clé intérieur:

<div *ngFor = "let file of files"> 
    <td>{{ file.originalname }}</td> 
    <td><img src="{{ file.location }}" (click)="delete(file.key)"></td> 
    </div> 

puis à suppression faire ce que vous voulez

Answer 2

Qu'en est-il de créer un bouton et passer le file.key à une fonction comme ça?

<div *ngFor = "let file of files"> 
    <td>{{ file.originalname }}</td> 
    <td><img src="{{ file.location }}"></td> 
    <button (click)="deleteImage(file.key)">Delete</button> 
</div> 

Et vous pouvez avoir dans votre composant la fonction:

deleteImage(fileKey) { 
    //Call the service and pass the fileKey as a payload 
}