如何使用Typescript Angular4

Question

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

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

我已经提到了其他一些例子，没有任何对我有用。

请参阅我的Stackblitz文件：https://stackblitz.com/edit/angular-s8oogm?file=app%2Fapp.component.html

我有HTMl，CSS和我想启用列表和网格视图之间切换的功能。

当我切换到列表视图时，我需要显示产品，如下图所示，对于我的stackblitz文件，我已经完成了CSS，但我不知道它是对还是错。

网格视图

列表视图

感谢。

Answer 1

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

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

并在你的component.ts

中

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

将此添加到您的css：

button.active {
 color: green;
}

Answer 2

添加class =＆＃39; card＆＃39; [ngClass] =＆＃34; isCard＆＃39;卡＆＃39;：＆＃39;列表＆＃39;＆＃34;

并在控制器中根据用户输入切换isCard标志

您需要根据ui要求实现卡片和列表类及其子类，也可以使用isCard标志显示特定于网格和列表视图的隐藏元素。