Question

我意识到一个即时信使。用户可以同时显示两个聊天窗口。我希望第一个窗口显示为蓝色，第二个窗口显示为灰色。

这就是我所拥有的：

<div class="chat-window-container" style="z-index: 1040">
  <window-item
    *ngFor="let thread of (windows ? windows.slice(0,2):[])"
    [thread]="thread">
  </window-item>
</div>

我希望两个窗口项是蓝色，另一个是灰色。

////// UPDATE //////

这是我的window-container.html：

<div class="chat-window-container" style="z-index: 1040">
  <window-item
    *ngFor="let thread of windows; let i = index"
    [class.myColorClass1]="i % 2 == 0" [class.myColorClass2]="i % 2 != 0"
    [thread]="thread">
  </window-item>
</div>

这是我的window-container.scss：

.myColorClass1 {
  color: blue;
}
.myColorClass2 {
  color: grey;
}

它适用于其他所有窗口，但我有另一个问题。我的窗口容器文件不会改变我的div的好处。我要编辑的div在另一个组件中：window-item。

<div class="panel-heading top-bar">

我可以在窗口容器组件的.scss文件管理器中更改窗口项组件的div样式吗？

Answer 1

使用索引并执行一个简单的模数。

<window-item *ngFor="let thread of windows; let i = index" [class.myColorClass1]="i % 2 === 0" [class.myColorClass2]="i % 2 !== 0"> 
</window-item>

修改

如果你想让childs div（window-item，div inside）改变它的颜色，把索引作为输入传递给组件。

@Input() index: number;

然后在childs模板中执行模数，就像将它用于childs-selector（window-item）一样。

编辑2018-11-14：

不是使用索引并在模板中进行模数，而是可以使用奇数或甚至相同的方式进行索引。我创建了一个stackblitz样本here。

使用* ngFor更改一个元素的两个样式

1 个答案: