如何使用Typescript Angular4在Grid和List视图之间切换 [英] How to switch between Grid and List view using Typescript Angular4

问题描述

在Angular4应用程序中工作，在这里，我需要一个UI，其中包含用于显示产品的网格视图和列表视图选项。

我设计了UI但我需要在Typescript中做一些魔术，所以我寻找SO。

我已经提到了其他一些例子，没有任何东西适用于我。

请参阅我的Stackblitz文件：

列表视图

>

谢谢。

解决方案

您可以创建2个嵌套组件AppGridProduct和AppListProduct，并根据您的显示模式调用显示它们并将数据发送到每个组件输入：

 < div class =btn-group pull-right> 
< button class =btn btn-whitetype =button（click）=onDisplayModeChange（1）
 [ngClass] ={'btn-primary active'：displayMode == = 1}> 
< i class =fa fa-th>< / i> 
< / button> 
< button class =btn btn-whitetype =button（click）=onDisplayModeChange（2）
 [ngClass] ={'btn-primary active'：displayMode == = 2}> 
< i class =fa fa-list>< / i> 
< / button> 
< / div> 
<！ - 网格 - > 
< div class =row* ngIf =displayMode === 1> 
< app-grid-container * ngFor ='let product of productsList'[product] =product>< / app-grid-container> 
 
< / div> 
<！ - 列表 - > 
< div class =row* ngIf =displayMode === 2> 
< app-list-container * ngFor ='let product of productsList'[product] =product>< / app-list-container> 
 
< / div> 
  

以及您的component.ts

  onDisplayModeChange（mode：number）：void {
 this.displayMode = mode; 
} 
  

将此添加到您的css中：

  button.active {
 color ：green; 
} 
  

Working in an Angular4 application ,In this I need to have a UI which contains the Grid view and List View options for displaying products .

I have designed the UI but I need to do some magics in Typescript,So I looking for SO.

I have referred some other examples nothing is worked for me .

Please refer my Stackblitz File : https://stackblitz.com/edit/angular-s8oogm?file=app%2Fapp.component.html

Where I have the HTMl,CSS and I want to enable the functions for switch between List and Grid View.

When I switch to list view I need to show the product like the below image ,For that my stackblitz file I have done the CSS but I don't know it's right or wrong .

Grid View

List View

Thanks.

解决方案

you can create 2 nested components AppGridProduct and AppListProduct and call show them based on your display mode and send data to each component using Input:

<div class="btn-group pull-right">
            <button class="btn btn-white" type="button"(click)="onDisplayModeChange(1)"
                [ngClass]="{'btn-primary active': displayMode === 1}" >
                <i class="fa fa-th"></i>
            </button>
            <button class="btn btn-white" type="button"  (click)="onDisplayModeChange(2)"
                [ngClass]="{'btn-primary active': displayMode === 2}" >
                <i class="fa fa-list"></i>
            </button>
 </div>
 <!-- grid -->
 <div class="row" *ngIf="displayMode === 1">
   <app-grid-container *ngFor='let product of productsList' [product]="product"></app-grid-container>

 </div>
 <!-- List -->
 <div class="row" *ngIf="displayMode === 2">
   <app-list-container *ngFor='let product of productsList' [product]="product></app-list-container>

 </div>

and in your component.ts

onDisplayModeChange(mode: number): void {
    this.displayMode = mode;
}

add this to your css:

button.active {
 color: green;
}

这篇关于如何使用Typescript Angular4在Grid和List视图之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！