如何将 html 中迭代对象的值传递给 Angular2/4 中的组件？

Question

I am allowing file uploads to S3 in my Angular2/4 app. It is set up so that when a user uploads in file, it'll store on a S3 bucket. After uploading, it'll show the user the files uploaded. If they accidentally uploaded the wrong file, I'd like to allow the option to delete the image with button that'll delete the corresponding file on S3. I have the key(needed to delete image on S3) but need help passing it to the component. I know using hidden inputs won't work. I'd assume passing the key might work, but there's a chance it'll break since the key ends with a file extension. Any thoughts?

upload.component.html

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

I need to pass {{ file.key }} to the component somehow via a delete button.

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

What about creating a button and pass the file.key to a function like so?

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

And then you can have in your component the function:

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

Answer 2

you can use ether this:

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

or this:

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

or this if file has the key inside:

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

and then in delete do what ever you want