在循环中为布尔变量赋值* ng

时间:2018-02-27 08:57:26

标签: html angular ngfor angular-ng-if

我的组件window-container中有一个ngFor循环,其中显示了几个聊天窗口(window-item)。我想为一个div设置一个变量(changeColor)为true,而将另一个div设置为false。 我希望能够在两个组件中使用此变量:window-containerwindow-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;
      }
   }
}

1 个答案:

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