我的组件window-container
中有一个ngFor循环,其中显示了几个聊天窗口(window-item
)。我想为一个div设置一个变量(changeColor
)为true,而将另一个div设置为false。
我希望能够在两个组件中使用此变量:window-container
和window-item
。
这就是我在window-container.html
中所做的,但它不起作用:
<window-item
*ngFor="let thread of windows; let i = index"
[thread]="thread">
<div *ngIf="i % 2 == 0"> {{this.threadService.changeColor = false}}</div>
<div *ngIf="i % 2 != 0"> {{this.threadService.changeColor = true}}
</div>
</window-item>
我希望变量changeColor
更改每个div的值,以便在我的window-item.html
中写入:
<div [ngClass]="{'window-grey' : !this.threadService.changeColor, 'window-blue': this.threadService.changeColor}">
<div class="panel-container">
<div class="panel panel-default">
...
</div>
</div>
</div>
我的window-item.scss
:
.panel-heading {
.top-bar {
.window-grey {
background: grey;
}
.window-grey {
background: grey;
}
}
}
答案 0 :(得分:2)
您可以使用它:
建议您通过
的odd
even
/ngFor
传递even :boolean:当项目在iterable中具有偶数索引时为真。
奇数:布尔值:当项目在可迭代中具有奇数索引时为真。
<window-item
*ngFor="let thread of windows; let i = index ; let odd = odd;"
[thread]="{ thread : thread , changeColor : odd }">
<!-- <div *ngIf="i % 2 == 0"> {{this.threadService.changeColor = false}} </div>
<div *ngIf="i % 2 != 0"> {{this.threadService.changeColor = true}} </div> -->
</window-item>
// window-item.html
<div [ngClass]="{'window-grey' : !changeColor, 'window-blue': changeColor}">
<div class="panel-container">
<div class="panel panel-default">
...
</div>
</div>
</div>
<强> WORKING DEMO 强>