angular5 Tab选项卡实现以及[ngClass] [ngStyle] [style.display]的使用

一、Tab选项卡的实现

Tab选项卡在前端工程中用的特别多，目前所用的ui组件库并没有给出Tab选项卡实现，自己就写一个，大佬们有好的写法可以提出来

1.html文件   scss部分

class="content">
  
class="tab-list">
    

      
class="tab" [ngClass] = "item==0 ? 'li-active' : ''" (click)="OnItemClick(0)">列表1
    
class="tab" [ngClass] = "item==1 ? 'li-active' : ''" (click)="OnItemClick(1)">列表2
      
class="tab" [ngClass] = "item==2 ? 'li-active' : ''" (click)="OnItemClick(2)">列表3
    
  
  
class="tab-content">
    
[style.display] = "item == 0 ? 'block' : 'none'">
    
[style.display] = "item == 1 ? 'block' : 'none'">
    
[style.display] = "item == 2 ? 'block' : 'none'">
  

.tab:hover{
  color: #F35A01;
}
.li-active{
  border-bottom: 2px solid #F35A01;
  color: #F35A01;
}

2.ts文件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.scss']
})
export class IndexComponent implements OnInit {
  item:number = 0;
  constructor() { }

  ngOnInit() {
  }

    OnItemClick(value){
        this.item = value;
        console.log(this.item);
    }
}

其中

[ngClass] = "{'li-active': item == 0}" (click)="OnItemClick(0)">列表1

 [ngClass] = "item==0 ? 'li-active' : ''" (click)="OnItemClick(0)">列表1

//上面两个效果一样

二、[ngClass] [ngStyle] [style.display]

class="not-found" [style.display] = "total == 0 ? 'none' : 'block'">1,没有找到你想要的！可以逛逛别的...
class="not-found" [style.display] = "'total' === 0 ? 'block' : 'none'">2,没有找到你想要的！可以逛逛别的...
class="not-found" [ngClass] ="{hide:total2}">3
class="not-found" [style.display] = "total === 1 ? 'none' : 'block'">4,没有找到你想要的！可以逛逛别的...
class="not-found" [ngStyle] = "{'display': total === 1 ? 'none' : 'block'}">5,没有找到你想要的！可以逛逛别的...
class="not-found" [ngStyle] = "{'display' : 'none'}">6,没有找到你想要的！可以逛逛别的...

total:number = 30;

total2:boolean=false;

结果是什么？