Angular2の動的div負荷

Question

Angularアプリケーションで複数のファイルをアップロードするシナリオがあるPrimeNGを使用しています。私はそれを知って倍= "真"私はPrimeNGのPファイルのアップロードで同じことを達成することができます。しかし、私がしたいのは、コードの下にを使って1つのファイルをアップロードするときに、別の同じスニペット/ divをその下に追加して同じことをしたいのです。これは何度も何度も行うべきです。どのように私はこれを達成することができる？私はあなたが私は次のdivから一つのファイルをアップロードすると上記のdivを再度追加することにしたい見ることができるように角度2

<div class="row"> 
<div class="col-md-12"> 
    <p-growl [value]="msgs" life="10000"></p-growl> 
    <p-fileUpload name="attachments" accept="pdf/*" auto="true" 
     (onSelect)="onSelectAttachments($event)" 
     (onUpload)="onUploadAttachments($event)" 
     (onClear)="clearAttachments()" url="{{attachmentUploadURL}}" 
     multiple="false" (onBeforeSend)="sendFile($event)" 
     chooseLabel="Click to Browse"> 
     <template pTemplate> 
     <ul *ngIf="uploadedAttachments.length"> 
       <li *ngFor="let file of uploadedAttachments">{{file.name}} - 
        {{file.size}} bytes 
       </li> 
      </ul> 
     </template> 
    </p-fileUpload> 
</div> 

でこれをやりたいです。これは任意の回数実行する必要があります。

Answer 1

私はあなたを正しく理解してくれることを願っています。 ngForを使用して複数のdivを表示できます。簡単な例を次に示します。

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <button (click)="finishRequest()">Finish Request</button> 
     <div *ngFor="let request of requests"> 
     my div content for request {{request.id}} 
     </div> 
    </div> 
    `, 
}) 
export class App { 
    id = 0; 
    constructor() { 
    this.requests = [{request:this.id++}]; 
    } 

    finishRequest() { 
    this.requests.push({request:this.id++}); 
    } 
}