どのようにして、反復オブジェクトの値をAngular2/4のhtmlでコンポーネントに渡しますか？

Question

Angular2/4アプリでS3へのファイルアップロードを許可しています。ユーザーがファイルにアップロードすると、S3バケットに保存されるように設定されています。アップロード後、アップロードされたファイルがユーザーに表示されます。誤って間違ったファイルをアップロードした場合は、S3で対応するファイルを削除するボタンで画像を削除するオプションを許可します。私はキーを持っていますが（S3でイメージを削除する必要がありますが）、コンポーネントに渡すのに役立つ必要があります。私は隠れた入力を使用して動作しません知っている。私は、キーを渡すことが動作するかもしれないと思うだろうが、キーがファイル拡張子で終わってから壊れる可能性がある。何かご意見は？

upload.component.html

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

Iが削除ボタンを介して何とか成分に{{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

：ファイルがキーを持っている場合

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

またはこの：

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

またはこの内部：

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

し、その後、削除のボタンを作成する方法についてあなたは

Answer 2

何をしたい、これまで何とそのような関数に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 
}