Проблема с компонентом в ngFor

Question

У меня возникла проблема с созданием ngFor с компонентом, который появится, когда пользователь нажмет на него. До сих пор у меня есть следующие:

<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> 

Где:

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

Который работает таким образом, что: пользователь нажимает на изображений на в нг-за (3 в ряд), а затем в компоненте product-zoom отображается изображение этого продукта.

Это нормально работает, когда отображается меньше 6 продуктов - в случае, когда есть больше продуктов, компонент масштабирования продукта находится в нижней части страницы, и пользователь не может его увидеть - ему нужно прокрутить, чтобы перейти к нему ,

Мне интересно, как я могу создать компонент каждый третий продукт в ngFor, и как я могу подключить клик (довольно много присваивать this.product правильному компоненту) данному компоненту product-zoom?

Answer 1

Я думаю, что на вашей странице есть только один компонент product-zoom, но сделайте CSS так, чтобы он отображался как оверлей.

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