Question

在semantic-ui中，关闭Icon不能使用* ngIf。如果删除* ngIf，它就会开始工作。我错过了什么？

  <div class="ui info message" *ngIf="message" >
          <i class="close icon" ></i>
          <div class="header">

          </div>
           <p> {{message}}</p>
      </div>
      </div>

//Javascript code
  $('.message .close').on('click', function() { $(this).parent().hide(); });

Answer 1

使用：

*ngIf="message?.length > 0" // For lists or string.

使用：

*ngIf="message" // Only if message is boolean

Answer 2

如果您使用角度，请不要将代码与jQuery混淆。 Angular也有点击事件 - （点击）。假设你想在点击图标时隐藏父div，你可以试试这个

<div class="ui info message" *ngIf="message" >
          <i class="close icon" (click)="hideMessage()"></i>
          <div class="header">

          </div>
           <p> {{message}}</p>
      </div>
      </div>

在组件中

message: boolean = true;

private hideMessage() {
     this.message = false;
}

Answer 3

使用此代码更改您的代码，这将说明。

$('.message').on('click','.close', function() { $(this).parent().hide(); });

****但我建议使用（点击）=＆＃34; someFunction（）＆＃34;在你的模板中

* ngIf导致消息框关闭时出现问题

3 个答案: