Question

我可以使用复选框选择多个ID，并且全部选中了这些ID，但是在CSS中只有其中一个处于活动状态。我要为选择的每个ID更改样式。

这是我的代码。

 selectedAvailableValueItemIds: string[] = [];
  activeVI: '';

<div class="tab-item" fxLayout="row" [ngClass]="{active: activeVI === valueItem.id, 'tab-item': true}">
                      <div class="icon">
                          <app-checkbox [ngModel]="selectedAvailableValueItemIds.includes(valueItem.id)" (ngModelChange)="onSelectAvailableValueItem(valueItem)"></app-checkbox>
                        </div>
                    <div class="unAssignedVIs" [ngClass]="{active: activeVI === valueItem.id, 'unAssignedVIs': true}">
                        {{valueItem.name}}
                    </div>
                    <div class="ipUnAssignedVIs" [ngClass]="{active: activeVI === valueItem.id, 'ipUnAssignedVIs': true}">
                      {{Level[valueItem.level]}}
                    </div>
                  </div>
                </div>

这是TS

onSelectAvailableValueItem(valueItem: ValueItem) {
    const index = this.selectedAvailableValueItemIds.indexOf(valueItem.id);

    if (index < 0) {
      this.selectedAvailableValueItemIds.push(valueItem.id);
     this.activeVI = valueItem.id
    } else {
      this.selectedAvailableValueItemIds.splice(index, 1);
      this.activeVI = '';
    }
  }

这是CSS

.unAssignedVIs {
  -webkit-box-flex: 1;
  width: calc(100% - 34em);
  padding-left: 15px;
  overflow: hidden;
  white-space: nowrap;
  background: #ebebeb;
  &.active {
    background: white;

  }
}

Answer 1

@ZhuniquA。抱歉，我读得太快了。当我们要选择一个且只有一个元素时，我们有一个唯一变量，如果我们要选择一个或多个元素，通常会向该元素添加一个新属性。

<!--I used a variable (really a property of valueItem) that I called checked -->
<div class="tab-item" fxLayout="row" [ngClass]="{'active': valueItem.checked, 'tab-item': true}">
     <div class="icon">
        <!--see that we can use as ngModel valueItem.checked-->
        <app-checkbox [(ngModel)]="valueItem.checked"></app-checkbox>
     </div>
     <div class="unAssignedVIs" [ngClass]="{'active': valueItem.checked, 'unAssignedVIs': true}">
        {{valueItem.name}}
     </div>
     <div class="ipUnAssignedVIs" [ngClass]="{'active': valueItem.checked, 'ipUnAssignedVIs': true}">
        {{Level[valueItem.level]}}
     </div>
</div>

在这种情况下，“魔术”是我们正在使用对象“ valueItem”，因此我们可以简单地使用valueItem.checked添加“ checked”属性（如果该属性不存在则未定义）

好吧，VisualStudio标记为“错误”，因为我们没有属性“ checked”。好。我们可以忽略此广告，或者在代码中指定属性

//If is an only element
   valueItem.checked=false;

//If we have an array of items we can write
//Imagine we have a variable items=[{name:"1",level:0},{name:"2",level:2},...]

this.items=this.items.map(item=>{
    return {...item,checked:false}
  })

我正在尝试所有选定的数组来更改Angular 4样式

1 个答案: