javascript - 你如何将值从 html 中的迭代对象传递到 Angular2/4 中的组件？

Question

我允许在我的 Angular2/4 应用程序中将文件上传到 S3。它被设置为当用户上传文件时，它将存储在 S3 存储桶中。上传后，它会向用户显示上传的文件。如果他们不小心上传了错误的文件，我想允许使用按钮删除图像的选项，该按钮将删除 S3 上的相应文件。我有 key (需要删除 S3 上的图像)但需要帮助将其传递给组件。我知道使用隐藏输入是行不通的。我假设传递 key 可能有效，但它有可能会中断，因为 key 以文件扩展名结尾。有什么想法吗？

upload.component.html

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

我需要通过删除按钮以某种方式将 {{ file.key }} 传递给组件。

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

创建一个按钮并将 file.key 传递给这样的函数怎么样？

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

然后你可以在你的组件中有这个功能:

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