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

一、Tab选项卡的实现

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

1.html文件   scss部分

<div class="content">
  <div class="tab-list">
    <ul>
      <li class="tab" [ngClass] = "item==0 ? 'li-active' : ''" (click)="OnItemClick(0)">列表1</li>
    <li class="tab" [ngClass] = "item==1 ? 'li-active' : ''" (click)="OnItemClick(1)">列表2</li>
      <li class="tab" [ngClass] = "item==2 ? 'li-active' : ''" (click)="OnItemClick(2)">列表3</li>
    </ul>
  </div>
  <div class="tab-content">
    <div [style.display] = "item == 0 ? 'block' : 'none'"><app-publish-list></app-publish-list></div>
    <div [style.display] = "item == 1 ? 'block' : 'none'"><app-member-list></app-member-list></div>
    <div [style.display] = "item == 2 ? 'block' : 'none'"><app-anchor-list></app-anchor-list></div>
  </div>
</div>

.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);
    }
}

其中

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

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

//上面两个效果一样

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

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

total:number = 30;

total2:boolean=false;

结果是什么？