在新版本Angular8中show方法（老版本：ng-show）和hide方法（老版本：ng-hide）是如何使用的

在老版本的Anguler或AngulerJS中我们通常的使用方法是：

  

   

    

     

    
    

     

       // 当role=x时，把td隐藏
     
    
   

    

     

    
    

     
 <td ng-hide="data.role==1">管理员</td>
     
    
   

    

     

    
    

     

       // 当role=x时，把td显示
     
    
   

    

     

    
    

     
 <td ng-show="data.role==1">管理员</td>
     
    
   

    

     

    
    

     
 <td ng-show="data.role==2">普通用户</td>
     
    
  
 

新版Anguler中show和hide的使用方式发生了变化：

  

   

    

     

    
    

     

      // show方法 --> *ngIf
     
    
   

    

     

    
    

     

      <td *ngIf="data.role==1">管理员</td>
     
    
   

    

     

    
    

     

      <td *ngIf="data.role==2">普通用户</td>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      // hide方法 --> [hidden]
     
    
   

    

     

    
    

     

      <td [hidden]="data.role==1">管理员</td>
     
    
   

    

     

    
    

     

      <td [hidden]="data.role==2">普通用户</td>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      // 当然也可以用 != 不等于
     
    
   

    

     

    
    

     

      <td [hidden]="data.role!=1">管理员</td>
     
    
  
 

文章来源: chensj.blog.csdn.net，作者：_陈哈哈，版权归原作者所有，如需转载，请联系作者。

原文链接：chensj.blog.csdn.net/article/details/103409640