Question

我正在尝试使用Bootstrap 4的expand-collapse功能，并且在使用* ngIf进行扩展和折叠时遇到了一个奇怪的问题。每当我尝试按如下方式使用* ngIf时，jquery均不起作用，但在删除* ngIf时起作用。

HTML：

<div class="collapse-group">
    <div class="row">
        <div class="col-md-7" id="row">
            <div id="link_text_div" *ngIf="this.collapseExpandArrowFlag==true">
          <span   id="collapse_all" class="close-button" (click)="arrowFunc($event)" style="cursor: pointer;" >
            Collapse all
          </span>
        </div>
        <div id="link_text_div" *ngIf="this.collapseExpandArrowFlag==false">
          <span  id="expand_all" class="open-button" (click)="arrowFunc($event)" style="cursor: pointer;"
         >
            Expand all
          </span>
        </div>
      </div>
 </div>
 </div>

.Ts：

collapseExpandArrowFlag = true;


  arrowFunc(event) {
if(event.srcElement.id === "collapse_all") {   //On-Click Collapse Logic

      this.collapseExpandArrowFlag = false;

      $(".close-button").on("click", function() {
        $(this).closest('.collapse-group').find('.multi-collapse').collapse('hide');
      });

    }


  if(event.srcElement.id === "expand_all") {      
      this.collapseExpandArrowFlag = true;

      $(".open-button").on("click", function() {
        $(this).closest('.collapse-group').find('.multi-collapse').collapse('show');
      });

    }

Answer 1

尝试在ngIf中删除“ this”：

 *ngIf="collapseExpandArrowFlag==true"

Answer 2

请删除“此”。从* ngIf只需写

*ngIf="collapseExpandArrowFlag"

如果这不起作用，请尝试将* ngIf更改为

[hidden]="collapseExpandArrowFlag"

和

[hidden]="!collapseExpandArrowFlag"

这将在加载时间将元素和事件添加到dom上。并将其保留在那里（显示：css中的none属性）。

此外，还要考虑如何使用外部库代码（如JQuery）。

请参阅参考文献：

Use jQuery script with Angular 6 CLI project

Answer 3

如下更改ts文件

collapseExpandArrowFlag = true;

arrowFunc(event) {
if(event.srcElement.id === "collapse_all") {   //On-Click Collapse Logic

  this.collapseExpandArrowFlag = false;

  $(this).closest('.collapse-group').find('.multi-collapse').collapse('hide');

}


if(event.srcElement.id === "expand_all") {      
  this.collapseExpandArrowFlag = true;

  $(this).closest('.collapse-group').find('.multi-collapse').collapse('show');

}

这里发生的是，当您单击按钮时，在ts代码内部，

  this.collapseExpandArrowFlag = false;

被调用，并且在模板中close-button被删除。

但是在ts代码的下一行中，

 $(".close-button")

被调用，但是在这种状态下该元素已从DOM中删除

并确保已从this.条语句中删除*ngIf

* ngIf和Jquery表现怪异-Angular 5

3 个答案: