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

其工作原理是：用户点击ng-for（每行3个）上的图像，然后在product-zoom组件中显示该产品的图像。

当显示的产品少于6个时，这种方法很好 - 如果有更多产品，产品缩放组件位于页面底部，用户无法看到它 - 他必须滚动才能看到它。

我想知道，如何在ngFor中每隔3个产品创建一个组件，如何将click（几乎将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;
    }
`]

ngFor中的组件问题

1 个答案: