如何通过 angular 中的 fa fa-minus 和 fa fa-plus 图标动态更改 show/hide div 2

Question

如何 show/hide div 单击“+”或“-”图标？我还想在用户单击时切换图标。

请在此处查看示例：

我怎样才能轻松做到？

Answer 1

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

模板：

  <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];
    }
  }
}

如何通过 angular 中的 fa fa-minus 和 fa fa-plus 图标动态更改 show/hide div 2

How to change show/hide divs dynamically by fa fa-minus and fa fa-plus icons in angular 2

typescript

angular2-template

angular