Question

我只想弄清楚这是否可能，或者我是否需要重新考虑我的事情。

Here's a very simple idea of where I'm at

我的主要列表将不断添加和删除其他进程的项目。我使用NgFor生成我的项目，我在样式表（+）中使用相邻的兄弟组合器将margin-top添加到除第一项之外的所有项目，然后{{1} }应用这个类本身。
到目前为止所有上帝......

现在我希望ngClass的值也是动态的，并且与来自其他服务的值相关联。

所以我的问题是，有人能给我一种方法来使用相邻的兄弟选择器和它适用的样式的动态值吗？

Answer 1

由于渲染的CSS不会跨浏览器执行变量，因此一个选项是添加style这样的小脚本

window.addEventListener('load', function() {
  loadStyle(20);
  setTimeout(function() { loadStyle(40); }, 1000);
  setTimeout(function() { loadStyle(60); }, 2000);
})

function loadStyle(margin) {
  var node = document.querySelector('my-app style') || document.createElement("style");
  var css = ".my-item+.my-item{margin-top: "+margin+"px;}"
  node.type = 'text/css';
  if (node.styleSheet){
    node.styleSheet.cssText = css;
  } else {
    node.appendChild(document.createTextNode(css));
  }
  document.querySelector('my-app').appendChild(node);
}

.my-item{
  background-color: red;
}
.my-item+.my-item{
  margin-top: 20px;
}

<my-app>
  <div class='my-item'>A</div>
  <div class='my-item'>B</div>
  <div class='my-item'>C</div>
</my-app>

Answer 2

您可以使用样式：

<div *ngFor="let user of userList" [ngClass]="'my-item'" [style.margin]="marginValue">{{user}}</div>

marginValue = '0 0 0 9px';

使用相邻的兄弟CSS组合器（+）与HgClass和动态值

2 个答案: