Question

我有一些例子

  <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元素，但我也是同时当varialble等于string时执行一些函数。有可能的？例如，当ngIf为真时，向DOM添加元素的一些函数

Answer 1

您可以在*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'
}

Answer 2

按照以下方式调用您的方法：{{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>

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

2 个答案: