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

Posted 2023-03-06

【中文标题】如何通过传递对象使用 [ngstyle] 将网格行和网格列动态传递到角度 div 选项卡

【英文标题】：How to pass grid-row and grid-column dynamically to angular div tab using [ngstyle] by passing object

【发布时间】：2021-10-19 21:21:17

【问题描述】：

我正在尝试使网格行和网格列从 API 动态填充

component.html

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

组件.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

我在哪里犯错了？提前致谢

【问题讨论】：

返回 obj 而不是 obj.toString。您需要将键值对传递给[ngStyle]。 angular.io/api/common/NgStyle#description

不走运先生，也通过发送 obj 尝试过

【参考方案1】：

根据NgStyle docs，

使用返回键值对的表达式设置样式值的集合。

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

您需要将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

包装整个div 元素并将其转为网格。

.grid-item

带有[ngStyle] 的网格项必须放置在此处，以便根据grid-row 和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

【讨论】：

先生，它不适用于网格行，我尝试使用背景颜色，它工作正常。

嗨，检查一下demo，怀疑是您的 CSS 样式问题。确保项目被包裹在 .grid-container 元素中。

您好，我已经从上面的demo中更改了component.ts文件中元素的顺序。问题依然存在。这是分叉的演示。 stackblitz.com/edit/…

嗨@Roddamharshavardhanreddy，抱歉回复晚了。我已经更新了答案。 [ngStyle] 需要放在.grid-item 元素中。