nếu khác trong cú pháp mẫu angular2

Question

Angular2..why và how?

Làm thế nào để thực hiện dưới đây nếu tình trạng angular2

<td *ngFor="let val of rows;let j=index"> 
      IF J==0 
       <label>{{val}}</label> 
      ELSE: 
       <label style="color:#000000;font-size:12px;padding-top: 5px">{{val}}</label> 

</td> 

Answer 1

Bạn có thể sử dụng *ngIf chỉ thị cấu trúc với cú pháp if-else để đạt được kết quả này.

<label *ngIf="j === 0; else elseBlock">{{val}}</label> 
<ng-template #elseBlock> 
    <label style="color:#000000;font-size:12px;padding-top: 5px">{{val}}</label> 
</ng-template> 

Một lựa chọn khác là sử dụng hai *ngIf khối và đảo ngược điều kiện, như vậy:

<label *ngIf="j === 0">{{val}}</label> 
<label *ngIf="j !== 0" style="color:#000000;font-size:12px;padding-top:5px">{{val}}</label> 

Answer 2

Nếu bạn có kế hoạch nâng cấp lên góc 4, bạn có thể sử dụng mới if/else trong mẫu mà bao gồm phiên bản này. Ví dụ:

<div *ngIf="someCondition; else falsyTemplate"> 
    <h1>Condition Passed!</h1> 
</div> 

<ng-template #falsyTemplate> 
    <h1>Condition Failed!</h1> 
</ng-template> 

Kiểm tra các liên kết hữu ích sau đây:

• http://angularjs.blogspot.it/2017/03/angular-400-now-available.html
• http://tylerscode.com/2017/03/angular-4-ngifelse/
• https://medium.com/aviabird/ngif-else-lands-in-angular-2-0-a242940e54ff

Cá nhân tôi muốn giới thiệu nâng cấp lên góc 4.

Answer 3

Bạn có thể làm điều này trong Angular 2 bằng cách sử dụng phần tử <ng-container>. Trong ví dụ của bạn cần một cái gì đó như thế này:

<td *ngFor="let val of rows;let j=index"> 
    <ng-container *ngIf="J==0"> 
     <label>{{val}}</label> 
    </ng-container> 
    <ng-container *ngIf="J!=0"> 
     <label style="color:#000000;font-size:12px;padding-top: 5px">{{val}} 
</label> 
    </ng-container> 
</td> 

Bạn có thể tìm thêm thông tin trong tài liệu: https://angular.io/guide/structural-directives#ng-container-to-the-rescue.