Problem mit Komponente in ngFor

Question

Ich habe ein Problem mit dem Erstellen von ngFor mit einer Komponente, die angezeigt wird, wenn der Benutzer darauf klicken wird. Bisher habe ich folgendes:

<div class="col-xs-3 col-xs-offset-1" (click)="viewProduct(product)" *ngFor="let product of products; let i = index"> 
    <img [src]="product.picture"/> 
</div> 

<product-zoom *ngIf="product" [(product)]="product"></product-zoom> 

Wo:

products = Products[]; 
viewProduct(value) <- sets this.product = value 

, die in der Art und Weise funktioniert, dass: Anwender auf der Sie auf die Bilder im ng-for (3 pro Zeile), und dann In der Komponente product-zoom wird das Bild dieses Produkts angezeigt.

Dies funktioniert gut, wenn weniger als 6 Produkte angezeigt werden - falls es mehr Produkte gibt, befindet sich die Zoomkomponente des Produkts unten auf der Seite und der Benutzer kann sie nicht sehen - er muss scrollen, um dorthin zu gelangen .

Ich frage mich, wie kann ich die Komponente jedes 3. Produkt in ngFor erstellen, und wie kann ich klicken klicken (dieses Produkt zu einer richtigen Komponente zuweisen) zu der gegebenen product-zoom Komponente?

Answer 1

Ich denke, es ist am besten, nur eine product-zoom Komponente auf Ihrer Seite zu haben, aber machen Sie das CSS so, dass es als Overlay angezeigt wird.

styles: [` 
    :host { 
     position: absolute; 
     width: 500px; 
     height: 500px; 
     left: 50%; 
     top: 50%; 
     margin-left: -250px; 
     margin-top: -250px; 
    } 
`]