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

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>

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

//////更新//////

这是我的 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">

我可以在 window-container 组件的 .scss 文件管理器中更改 window-item 组件的 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>

编辑:

如果您希望子 div(窗口项，内部的 div)更改其颜色，请将索引作为输入传递给组件。

@Input() index: number;

然后在您的子模板中执行取模操作，就像您将它用于子选择器(窗口项)一样。

编辑 2018-11-14:

除了在模板中使用索引和取模，您可以使用奇数甚至与索引相同的方式。我创建了一个 stackblitz 示例 here .