Question

我有一个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;}  
}
}

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

Answer 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生命周期方法中修改这些属性。

TS

width=10;
height=10;

 ngDoCheck(){

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

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

1 个答案: