Wie Ansicht Kinder in angular2

Question

verwende ich einen HTML-Code, wie diese mit Vorlage Referenzgröße haben für app-image-upload-component

<div *ngFor="let image of images"; let i = index> 
    <app-image-upload #imageUpload (click)="uploadImage(i)" (image)="setImageData($event, i)"> 
    <img src="assets/img/camera-img.png" alt="img"> 
    <h4>Upload Image</h4> 
    </app-image-upload> 
</div> 

Da ist in meinem Typoskript Code, ich tue so etwas wie dieses

@ViewChild('imageUpload') imageUpload: ImageUploadComponent; 

uploadImage(index) { 
    console.log('index', index); 
    this.imageUpload.showImageBrowseDlg(); 
} 

Wenn Ich fire click event on app-image-upload, dann zeigt es immer index value 0, egal was ist der Index *ngFor.

Ich weiß, dass dies geschieht, weil #imageUpload nur auf das erste Element von ngFor refrencing, so ist es eine Möglichkeit, alle Elemente der *ngFor anders zu verweisen und sie zu nutzen, wie es in meinem Code erforderlich.

Answer 1

Sie können ViewChildren verwenden, die eine QueryList von Komponenten hat.

import {ViewChildren,QueryList} from '@angular/core'; 
    @ViewChildren('imageUpload') imageUploads: QueryList<ImageUploadComponent>; 

    uploadImage(index) { 
     console.log('index', index); 
     this.imageUploads.find((imgUpld,i)=>{ 
      return index == i; 
     }).showImageBrowseDlg(); 
    } 

Answer 2

Schließlich habe ich herausgefunden, wie dieses Problem zu lösen, statt @ViewChild, i @ViewChildren verwenden können und so etwas tun kann.

@ViewChildren(ImageUploadComponent) imageUploadChildren: QueryList<ImageUploadComponent>; 

#Subscribe for changes, so that if we delete any children, then it must new array. 

ngAfterViewInit() { 
    this.imageUploadChildrenArray = this.imageUploadChildren.toArray(); 
    this.imageUploadChildren.changes.subscribe(childern => { 
    this.imageUploadChildrenArray = childern.toArray(); 
}); 

}

uploadImage(index) { 
    this.imageUploadChildrenArray[index].showImageBrowseDlg(); 
} 

Answer 3

Sie einen BEZUG Funktion zu handhaben passieren kann. Stellen Sie sicher, dass Sie Ihre Upload-Anweisung mit exportAs exportieren und weisen Sie ihr einen Verweis zu. Sehen Sie ein Beispiel hier:

https://plnkr.co/edit/BN2dreniteQag82h28BC?p=preview

@Directive({ 
    selector: '[upload]', 
    exportAs: 'upload' 
    }) 
    export class Upload { 
    static i =0; 
    constructor() { 
     this.instanceI = Upload.i++; 
     console.log('upload'); 
    } 
    } 

    @Component({ 
    selector: 'my-app', 
    template: ` 
     Last handled upload {{last}} 
     <div *ngFor="let i of items"> 
     <h2 upload #uploadRef="upload" (click)="handle(uploadRef)">Hello {{i}}</h2> 
     </div> 
    `, 
    }) 
    export class App { 
    items = ['a', 'b', 'c']; 

    constructor() { 
    } 

    handle(uploadRef) { 
     console.log(uploadRef); 
     this.last = uploadRef.instanceI; 
    } 
    }