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

Question

我可以使用复选框选择多个 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 标记为“错误”，因为我们没有“选中”属性。出色地。我们可以忽略这个广告，或者在代码中给出属性

//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}
  })