如何使用 [ngstyle] 通过传递对象将网格行和网格列动态传递到 angular div 选项卡

Question

我正在尝试使网格行和网格列从 API

动态填充

component.html

<div *ngFor = "let element of elements">
   <div [ngStyle]="styleObject(element.Row,element.Column)">{{element['Tool Name']}}</div>
</div>

component.ts

styleObject(row : String,Column:String): Object {
    let obj :Object;
    obj = {'grid-row':''+Number(row),'grid-column':''+Number(Column)};
    console.log(obj);
    return obj.toString;
}

这种方式在控制台中打印，但未反映在 UI 中。 Console Image

当我尝试手动填充数据时它工作正常

<div [ngStyle]="{'grid-column':'9','grid-row':'9'}">{{element['Tool Name']}}</div>

在检查元素模式中，属性显示为 enter image description here

我哪里出错了？提前致谢

Answer 1

根据NgStyle docs，

Set a collection of style values using an expression that returns key-value pairs.

<some-element [ngStyle]="objExp">...</some-element>

您需要 return styleObject 作为 键值对 类型而不是 string 类型。

styleObject(row : String, Column:String): Object {
  let obj :Object;
  obj = {'grid-row':''+Number(row),'grid-column':''+Number(Column)};
  return obj;
}

你可以看看这个sample demo。

更新了网格布局问题

对于您的网格布局，应该有 .grid-container 和 .grid-item。

.grid-container

Wrap the whole div element and turn it to the grid.

.grid-item

The grid item with [ngStyle] have to place here so that it will be positioned based on grid-row and grid-column.

component.html

<div class="grid-container">
  <div *ngFor="let element of elements" class="grid-item" 
    [ngStyle]="styleObject(element.row, element.column)">
    {{element['name']}}
  </div>
</div>

.component.css

.grid-container {
  display: grid;
  grid-row-gap: 50px;
  grid-template-columns: auto auto auto;
  justify-content: center;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

Sample Grid Layout on StackBlitz

如何使用 [ngstyle] 通过传递对象将网格行和网格列动态传递到 angular div 选项卡

How to pass grid-row and grid-column dynamically to angular div tab using [ngstyle] by passing object

html

css

ng-style

css-grid

angular

更新了网格布局问题