Question

假设我有面板。我希望能够消耗/折叠它，具体取决于下拉列表的选定值。

var testObjects = localStorage.getItem("testObjects") ? JSON.parse(localStorage.getItem("testObjects")) : [];

这是下拉列表。

<div class="collapse" id="collapseExample">
    <div class="well">
        ...
    </div>
</div>

这是事件处理程序。并且，如果选择了州，则花费该小组。否则，折叠面板。

<select id="state" name="state"
        [(ngModel)]="stateId"    
        (change)="onChange($event.target.id, $event.target.value)"
        class="form-control">
        <option *ngFor="let r of statesList"
            value="{{ r.id }}">{{ r.name }}
        </option>
</select>

使用 Jquery ，我可以执行以下操作：//Events onChange(id: string, deviceValue: string) { if (id == "state") { if (deviceValue) { //expend the panel... } else{ //collapse the panel... } } }。

如何在$("#collapseExample").collapse();中获得相同内容？

Answer 1

如果添加in类，则引导程序将显示div，并且在删除in类时将隐藏div。

基本解决方案看起来像这样。

<div class="collapse" id="collapseExample" [ngClass]="{'in': isOpen}">
    <div class="well">
        ...
    </div>
</div>

在你的班级中添加一个布尔变量。

isOpen: boolean;

并根据您的业务限制进行设置。

 onChange(id: string, deviceValue: string) {
              if (id == 'state') {
                  if (deviceValue) // {
                      //expand the panel...
                      this.isOpen = true;
                  }
                  else {
                      //collapse the panel...
                      this.isOpen = false;
                  }
              }
          }

但是，我建议您创建一个可以在整个解决方案中实现的自定义指令，并且可以避免在任何地方编写[ngClass]="isOpen ? 'in' : ''"。您可以使用自己的指令，例如

<div class="collapse" id="collapseExample" [btCollapse]="isOpen">

更新：支持动画。

<div id="demo" class="block" [style.height]="height + 'px'" #my>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>

<select id="state" name="state"
        [(ngModel)]="stateId"    
        (change)="onChange($event.target.id, $event.target.value, my.scrollHeight)"
        class="form-control">
        <option *ngFor="let r of statesList"
            value="{{ r.id }}">{{ r.name }}
        </option>

<强> Component.ts 在类中声明一个新变量。

height = 0;

onChange(id: string, deviceValue: string, height: number) {

      if (id == 'state') {
          if (deviceValue == '1') {
              //expand the panel...
              this.height = height;
          }
          else {
              //collapse the panel...
              this.height = 0;
          }
      }
  }

不要忘记在内联组件样式或共享css文件中添加样式。

styles: [`
    .block {
      overflow: hidden;
      -webkit-transition: height .5s;
      transition: height .5s;
    }
  `]

如何在Angular 2 / Typescript中触发bootstrap崩溃

1 个答案: