html - 无法在 UL + LI (CSS) 中隐藏 HTML

Question

任何人都可以看到或思考为什么我不能隐藏第 5 项以后的元素吗？
我只想显示元素 #1、#2、#3 和 #4，其余全部隐藏(即 完全 从代码中隐藏)。
我可以从客户端 View 中隐藏它们，但查看源代码你可以看到 HTML - 我在这里做错了什么？
我试过了:

visibility: hidden 

也

display: none

仍然，代码在那里......

ul>li {
  display: inline-block;
  /* You can also add some margins here to make it look prettier */
  width: 180px;
  zoom: 1;
  *display: inline;
  /* this fix is needed for IE7- */
}

ul>li:nth-of-type(1n+5) {
  display: none;
}

.speakercard {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 180px;
  margin: auto;
  text-align: center;
  padding-top: 14px;
}

button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 10px;
  color: white;
  background-color: #393939;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

a {
  text-decoration: none;
  color: black;
}

button:hover,
a:hover {
  opacity: 0.7;
}

.image-cropper {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #ccc;
  margin-left: auto;
  margin-right: auto;
}

.profile-pic {
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}

<ul>
  <li>
    <div class="speakercard">
      <div class="image-cropper">
        <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%">
      </div>
      <p>1 Poo Doe</p>
      <p><button>Speaker Profile</button></p>
    </div>
  </li>

  <li>
    <div class="speakercard">
      <div class="image-cropper">
        <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%">
      </div>
      <p>2 Doe</p>
      <p><button>Speaker Profile</button></p>
    </div>
  </li>

  <li>
    <div class="speakercard">
      <div class="image-cropper">
        <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%">
      </div>
      <p>3 Doe</p>
      <p><button>Speaker Profile</button></p>
    </div>
  </li>

  <li>
    <div class="speakercard">
      <div class="image-cropper">
        <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%">
      </div>
      <p>4 Doe</p>
      <p><button>Speaker Profile</button></p>
    </div>
  </li>

  <li>
    <div class="speakercard">
      <div class="image-cropper">
        <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%">
      </div>
      <p>THIS SHOULD BE TOTALLY HIDDEN</p>
      <p><button>Speaker Profile</button></p>
    </div>
  </li>

  <li>
    <div class="speakercard">
      <div class="image-cropper">
        <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%">
      </div>
      <p>THIS SHOULD BE TOTALLY HIDDEN</p>
      <p><button>Speaker Profile</button></p>
    </div>
  </li>

  <li>
    <div class="speakercard">
      <div class="image-cropper">
        <img src="./img.jpeg" class="profile-pic" alt="" style="width:100%">
      </div>
      <p>THIS SHOULD BE TOTALLY HIDDEN</p>
      <p><button>Speaker Profile</button></p>
    </div>
  </li>
</ul>

知道如何做到这一点吗？
谢谢!

Answer 1

Demo
要隐藏查看源代码，您应该使用 ngIf指令而不是 css或者您可以使用自定义 pipe来展示你想要的。
或者您可以连接到 ngFor您的元素并过滤与您想要的相关的列表。css刚申请设计。它适用于用户 View
对于 ngIf 你的 html

<ul>
  <ng-container *ngFor="let data of personels;let i = index;">
    <li *ngIf="i<4">
      <div class="speakercard">
        <div class="image-cropper">
          <img src="{{data.img}}" class="profile-pic" alt="" style="width:100%">
        </div>
        <p>{{data.id}} {{data.Name}}</p>
        <p><button>Speaker Profile</button></p>
      </div>
    </li>
  </ng-container>
</ul>

在 component.ts 中创建你的数组

personels=[
    {id:1,Name:"Poo Doe",img:"image1"},
    {id:2,Name:"Poo Doe",img:"image1"},
    {id:3,Name:"Poo Doe",img:"image1"},
    {id:4,Name:"Poo Doe",img:"image1"},
    {id:5,Name:"Poo Doe",img:"image1"},
    {id:6,Name:"Poo Doe",img:"image1"},
    {id:7,Name:"Poo Doe",img:"image1"}
  ]

这是管道 example
创建自定义管道

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'customPipe'
})

export class CustomPipe implements PipeTransform {
  transform(row: any[],n:number): any {
      return row.filter((x,idx)=>idx<n);       
  }
}

并在 html 中使用管道

<ul>
    <li *ngFor="let data of personels|customPipe:4">
      <div class="speakercard">
        <div class="image-cropper">
          <img src="{{data.img}}" class="profile-pic" alt="" style="width:100%">
        </div>
        <p>{{data.id}} {{data.Name}}</p>
        <p><button>Speaker Profile</button></p>
      </div>
    </li>
</ul>