html - Angular/CSS : grid of dynamically resizable objects

Question

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

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

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

Answer 1

非常感谢@amedina，这正是我要找的!这就是我所做的-我为宽度和高度属性添加了一个 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 生命周期方法中修改这些属性。

TS

width=10;
height=10;

 ngDoCheck(){

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