为循环 * ngfor中的布尔变量分配值

Question

我在组件中有一个ngfor循环window-container，其中我有几个显示的聊天窗口(window-item(。我想将一个变量(changeColor(设置为一个在两个上的DIV，而对于两个Div的一个div。我希望能够在两个组件中使用此变量：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>

我希望每个div的变量changeColor在我的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;
      }
   }
}

Answer 1

您可以使用它：

建议您通过ngFor的odd/even

通过

偶数

奇数：boolean：true当项目中有奇数索引时。

<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>

工作演示