多个选项的切换显示效果

选项卡切换多选

• 效果如下

  
  1554477274277.gif
• html

<div>
  点击的列表
  <ul>
    <li (click)="onItemClick(i)" *ngFor="let item of nameObjList;let i = index;" [ngClass]="currentIndex ===i&&showInput?'red': ''">{{item.name}} <span>{{item.status}}</span></li>
  </ul>
  <div [hidden]="currentIndex === 1||currentIndex === 2||!showInput">
    名称A <input type="text" [(ngModel)]="a" (keyup)="onChange(currentIndex)">
  </div>
  <div [hidden]="currentIndex === 0||currentIndex === 2||!showInput">
    名称B <input type="text" [(ngModel)]="b" (keyup)="onChange(currentIndex)">
  </div>
  <div [hidden]="currentIndex === 0||currentIndex === 1||!showInput">
    名称C <input type="text" [(ngModel)]="c" (keyup)="onChange(currentIndex)">
  </div>
</div>

若使用ngIf来实现
例如 名称A  *ngIf="currentIndex ===0"&&showInput  即可

此处使用ngIf会简便一些，但是由于组件较为复杂的情况，不适合用ngIf，就是用hidden来实现显示隐藏
hidden不会将整个组件完全移除

• ts

  inputValue = ''
  showInput = false
  currentIndex = 0
  a = ''
  b = ''
  c = ''

  onItemClick(i) {
    if (this.currentIndex === i) {
      this.showInput = !this.showInput
    } else {
      this.showInput = true
    }
    this.currentIndex = i
  }
  onChange(i) {
    if (i === 0) {
      this.nameObjList[i].status = this.a.trim().length > 0;
    } else if (i === 1) {
      this.nameObjList[i].status = this.b.trim().length > 0;
    } else {
      this.nameObjList[i].status = this.c.trim().length > 0;
    }
  }

一个变量即可进行单选的控制， 如果需要进行重复点击后显示隐藏， 则需要增加一个新的变量， 如果需要通过判断输入框是否有值，则需要判断并给名称的列表里面增加一个属性来判断其此时的状态， 通过bool值来判断有图标或高亮等