CSS/Angular：扩展 div答案

【问题标题】：CSS/Angular : Expanding a divCSS/Angular：扩展 div
【发布时间】：2018-10-14 12:25:58
【问题描述】：

我项目的场景是：

当用户点击“动物”图块时，它应该展开并替换其他图块。同样，单击“植物”图块时，它应该展开，其他图块应该重新排序。

===========第一次观看：============

===========第二次查看==============

第一页显示，平铺视图

第二页显示，点击磁贴时展开的 div。

请帮助我实现这一目标。

我的代码如下。我能够显示隐藏展开的磁贴，但我无法隐藏用户单击并重新排序磁贴的磁贴。实现这一目标的任何提示？我不想要扩展和收缩动画。

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';
  showDiv:boolean = false;
  showDetails():void{
    this.showDiv = !this.showDiv;
  }
}

<div *ngIf="showDiv" style="width:450px;height:150px;border:2px solid black">
  Expanded div
</div>
<br/>
<div (click)="showDetails()" style="width:100px;height:100px;border:2px solid black;clear:both;float:left">
  tile 1
</div>
<div style="width:100px;height:100px;border:2px solid black;float:left;margin-left:10px">
  tile 2
</div>
<div style="width:100px;height:100px;border:2px solid black;float:left;margin-left:10px">
  tile 3
</div>

【问题讨论】：

标签： html angular css typescript primeng

【解决方案1】：

这个问题可以使用ViewChild装饰器来解决，但我认为这个问题不需要这么复杂的解决方案。相反，我们可以简化显示图块背后的逻辑。

首先我们可以将 tile 定义移动到组件中并将它们存储在tiles 数组中；

tiles = [
  { name: 'Animals' },
  { name: 'Plants'},
  { name: 'Organisms'},
];

然后我们创建表示当前展开的图块和包含所有未展开图块的数组的变量。

expandedTile = null;  
notExpandedTiles = this.tiles;  // at the beginning all tiles are not expanded

拥有所有这些数据后，可以使用*ngFor 指令重构模板。另外内联样式被移动到单独的 css 文件中。

<div *ngIf="expandedTile" class="expanded-tile">
  {{expandedTile.name}}
</div>
<br/>
<div class="tiles">
  <div *ngFor="let tile of notExpandedTiles;" (click)="showDetails(tile)" class="tile">
    {{tile.name}}
  </div>
</div>

当用户点击一些未展开的图块时，它将作为参数传递给showDetails 函数，该函数将修改适当的数据。

showDetails(clickedTile) {
  // assign clickedTile to expandedTile
  this.expandedTile = clickedTile;
  // Assign array of all tiles except clickedTile to notExpandedTiles
  this.notExpandedTiles = this.tiles.filter(tile => tile !== clickedTile);
}

css:

.tile, .expanded-tile {
  border: 2px solid black;
}

.tile {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

.expanded-tile {
  width: 450px;
  height: 150px;
}

演示：https://stackblitz.com/edit/angular-8wekfm

【讨论】：

【解决方案2】：

我建议将引导类（如 col-lg-12）与 ngClass 和变量一起使用，其值在单击此变量的基础时发生变化，将引导类从 col-lg-3 更改为 col-lg-12

【讨论】：

【解决方案3】：

我建议您为此使用 flexbox ( css )。单击这些图块只需更改 flexbox 属性。

【讨论】：