如何通过角度2中的fa fa-minus和fa fa-plus图标动态更改显示/隐藏div

Question

如何通过点击＆＃39; +＆＃39;显示/隐藏div？或者＆＃39; - ＆＃39; fa图标？我还希望在用户点击图标时切换图标。

请看这里的例子：

我怎样才能轻松完成？

Answer 1

有一种非常简单的方法可以很容易地做到这一点。 我使用Boolean数组来获得此结果

模板：

  <div class="box box-info" *ngFor="let item of result; let x = index"> <!-- make loop for draw forms -->
    <div class="box-header with-border">
      <h3 class="box-title"><span *ngIf="item.hasChildren" class="fa fa-sign-out"></span> {{item.name}}</h3>

      <div class="box-tools pull-right">
        <a class="btn btn-box-tool" data-widget="collapse" (click)="toggle(x)">
          <!-- use colapse[x] to change minus to plus -->
          <i class="fa" [ngClass]="{'fa-minus': colapse[x], 'fa-plus': !colapse[x]  }"></i>
        </a>
      </div>
    </div>
    <!-- show/hide div -->
    <div class="box-body" *ngIf="colapse[x]">
      <div class="table-responsive">
        <table class="table no-margin">
          <thead>
            <tr>
              <th>numbering</th>
              <th>description</th>
              <th>value</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let setting of item.configs; let i = index" >
              <td>{{i + 1}}</td>
              <td>{{setting.description}}</td>
              <td class="col-lg-3 col-md-4">
                <input type="text" class="form-control" [(ngModel)]="setting.value" name="value" #ngvalue="ngModel"  value="{{setting.description}}">
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

这里是.ts文件的OnInit：

export class MyComponent implements OnInit {

  //for result from service
  result: ConfigGroups[];
  //for show/hide box
  colapse: boolean[] = [false];

  constructor(private settingService: SettingService) { }

  ngOnInit() {
    this.settingService.getConfigGroup(null, null).subscribe(res => {
      //map return object to class
      this.result = <ConfigGroups[]>res.data.configGroups;

    }, error => { }, () => { });

  }

  // show/hide box and change fa icons
  toggle(id) {

    if (!this.colapse[id]) {
      this.colapse[id] = true;
    }
    else {
      this.colapse[id] = !this.colapse[id];
    }
  }
}