Angular2 click and ngIF

Question

I want to use (click) function only when ngIF have value True .

<tbody class="table-hover domains">
    <tr *ngFor="let domain of domains" (click)="gotoDetail(domain.id)">
        <td class="col-md-3">{{ domain.name }}</td>
        <td>{{ domain.validated }}</td>
    </tr>
</tbody>

So I need to add ngIF in <tr> tag as if {{ domain.validated }} value is True , then (click) function works, else it don't work or show message that variable have value False . How to do that?

Answer 1

Try using this:

<tbody class="table-hover domains">
  <tr *ngFor="let domain of domains" (click)="!domain.validated || gotoDetail(domain.id)">
  <td class="col-md-3">{{ domain.name }}</td>
  <td>{{ domain.validated }}</td>
  </tr>
</tbody>

Hope it will work for you .

The function will only be called if first part(!domain.validated) will return false.

Answer 2

您可以向goToDetail函数提供第二个参数Boolean，并仅在用户为真时重定向。

Answer 3

Try this:

<tbody class="table-hover domains">
  <template ngFor let-domain [ngForOf]="domains ">
  <tr *ngIf="domain.validated" (click)="gotoDetail(domain.id)">
    <td class="col-md-3">{{ domain.name }}</td>
    <td>{{ domain.validated }}</td>
  </tr>
  </template>
</tbody>

You can use ng-template also.

Answer 4

You can define your function like this:

gotoDetail(id: number){
    if (this.domain.validated)
    // Your normal code
    else 
    // Display error message, Do nothing
}