首页 文章

ngIf显示/隐藏元素并执行功能

提问于
浏览 次
0

我有一些例子

<div *ngIf="nameOfDocx == 'emailTab'" class="tabcontent" #tab2 label="Email">
    <details *ngFor="let doc of emaildocuments">
      <summary>{{doc.documentGuid}}</summary>
      <ul *ngFor="let page of doc.DocumentPages">
        <li (click)="pickDoc(page)">{{ page.pageGuid}}</li>
      </ul>
    </details>
  </div>

它可以正常显示并隐藏DOM元素，但同时我也可以在变量等于字符串时执行某些功能 . 有可能的 ？例如，当ngIf为true时，向DOM添加元素的一些函数

angular

2 回答

  • 2

    您可以在 *ngIf 中添加任何表达式，就像方法一样 . 在方法中做你的逻辑 .

    <div *ngIf="myMethod(nameOfDocx)" class="tabcontent" #tab2 label="Email">
    <details *ngFor="let doc of emaildocuments">
      <summary>{{doc.documentGuid}}</summary>
      <ul *ngFor="let page of doc.DocumentPages">
        <li (click)="pickDoc(page)">{{ page.pageGuid}}</li>
      </ul>
    </details>
  </div>

    然后在您的组件类中创建一个方法，使用您的逻辑：

    myMethod(nameOfDocx){
   // some logic
   return nameOfDocx == 'emailTab'
}
    回复于
  • 1

    像这样调用你的方法： {{yourMethod()}}

    <div *ngIf="nameOfDocx == 'emailTab'" class="tabcontent" #tab2 label="Email">
   {{yourMethod()}}
   <details *ngFor="let doc of emaildocuments">
      <summary>{{doc.documentGuid}}</summary>
      <ul *ngFor="let page of doc.DocumentPages">
        <li (click)="pickDoc(page)">{{ page.pageGuid}}</li>
      </ul>
    </details>
  </div>
    回复于

相关问题