Angular/CSS：动态调整大小对象的网格答案

【问题标题】：Angular/CSS: grid of dynamically resizable objectsAngular/CSS：动态调整大小对象的网格
【发布时间】：2018-04-26 01:54:54
【问题描述】：

我有一个 API 来获取我用小彩色块表示的 json 数据。现在我有这些块的固定高度和宽度。我的问题是如何修改这些块的大小，以便当对象数量不断增加时，这些块的大小不断减小，确保父容器的大小适合页面。我还想要一次只能显示 200 个块的选项

HTML

<div class="ui-array-resources">
    <div  *ngFor="let resource of filteredResources;" class="ui-array-resource" (click)="resourceDidClick(resource)"    
                    [ngClass]="{'ui-status-not-connected': resource.primary_status==='NC',
                    'ui-status-sleeping': resource.primary_status==='SLP',
                    'ui-status-inactive': resource.primary_status==='IA',
                    'ui-status-available': resource.primary_status==='GI',
                    'selected-resource': resource === selectedResource}">
      </div>
 </div>

CSS

.ui-array-resources {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border: 1px dashed lightgray;
    padding: 30px;
    margin:50px;
    position: relative;

    .ui-array-resource {
        width:30px;
        height: 30px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        margin: 1px;
        border-radius: 3px;
        &.selected-resource {box-shadow: inset 1px 2px 10px rgba(0, 0, 0, 0.5);}
        &:hover {
            transform: scale(1.5);
            border: 1px solid white;
            box-sizing: border-box;
            box-shadow: none;
                }
        &.ui-status-not-connected {background-color: #EF5350;}
        &.ui-status-available {background-color: #66BB6A;}
        &.ui-status-sleeping {background-color: #FFCA28;}
        &.ui-status-inactive {background-color: #D3D3D3;}  
}
}

我浏览了几篇文章和解决方案，但对于未定义的大量此类嵌入式对象似乎没有任何效果。

【问题讨论】：

好吧，为了修改所有这些正方形的大小，我会将它们应用到 CSS 属性 width 和 height，它们每个都链接到 Angular 属性知道你有多少块。剩下的就是数学了。抱歉，根据您发布的代码，我无法写出完整的答案，但我给了您一个想法。

标签： html angular css flexbox

【解决方案1】：

非常感谢@amedina，这正是我想要的！这就是我所做的- 我为 width 和 height 属性添加了一个 ngStyle 属性。

HTML

 <div class="ui-array-resources">
                        <div  *ngFor="let resource of filteredResources;" class="ui-array-resource" (click)="resourceDidClick(resource)"    
                        [ngStyle]="{'width':width + 'px', 'height':height + 'px'}"
                        [ngClass]="{'ui-status-not-connected': resource.primary_status==='NC',
                        'ui-status-sleeping': resource.primary_status==='SLP',
                        'ui-status-inactive': resource.primary_status==='IA',
                        'ui-status-available': resource.primary_status==='GI',
                        'selected-resource': resource === selectedResource}">
                        </div>
                    </div>

我后来检查了对象的数量以在 ngDoCheck 生命周期方法中修改这些属性。

width=10;
height=10;

 ngDoCheck(){

    if(this.filteredResources){
      if(this.filteredResources.length<20){
      this.width=30;
      this.height=30;
      }
}
}

【讨论】：