Скрыть нижнюю границу в css перед загрузкой контента

Question

скриншот проблемы загрузки Я использовал поле метки в моем div с циклом for.В метке css я использовал свойство нижней границы.Проблема в том, что при загрузке страницы видна только нижняя граница.После загрузки содержимого эти изображения становятся видимыми в теге img.Я хочу, чтобы удалить границы нижней части во время загрузки.[скрытая] переменная устанавливается как ложная после получения данных через подписку.

данные файла приведены ниже.

.html файл

<div [hidden]="varible" class="wrapper">
  <div class="tab" *ngFor="let items of itemsData?.data;let i=index;">
    <input id={{i}} type="checkbox" name="tabs">
    <label for={{i}}>
      <img src={{items.imgSrc}}>
      <span>{{items.title}}</span>
    </label>
  </div>
</div>

.scss файл

wrapper {
    height: calc(100vh - 3.5em);
    overflow-y: scroll;
    .tab {
        position: relative;
        margin-bottom: 1px;
        width: 100%;
        color: #fff;
        overflow: hidden;
    }
    .tab input {
        position: absolute;
        opacity: 0;
        z-index: -1;
    }
    .tab label {
        position: relative;
        display: block;
        font-weight: bold;
        color: #444;
        cursor: pointer;
        border-bottom: 1px solid #E9E9E9; // here is the bottom border
        margin-left: 16px;
        margin-right: 16px;
        img {
            margin: 10px 10px 10px 0px;
        }
        span {
            position: relative;
            bottom: 22px;
            font-size: 13px;
            color: #666666;
            letter-spacing: 0.59px;
            font-weight: 500;
        } 
    }
}

.ts file

public varible: boolean = true;
ngOnInit() {

    this.service.getResults().subscribe(
      (response: any) => {
          this.searchItemsData = response; 
          this.varible= false;
      },
      error => {
        console.log(error);
      }
    );
  }

Answer 1

<div [hidden]="varible" class="wrapper">

эта строка Изменить на

<div [hidden]="varible == false" class="wrapper">

Answer 2

Вы должны добавить флаг для этой границы и установить его в false по умолчанию.Измените это на true после загрузки контента.

В вашем html вы должны использовать:

<div [hidden]="varible" class="wrapper">
  <div class="tab" *ngFor="let items of itemsData?.data;let i=index;">
    <input id={{i}} type="checkbox" name="tabs" [ngStyle]="bottom-border && {'border-bottom:': '1px solid #E9E9E9'}>
    <label for={{i}}>
      <img src={{items.imgSrc}}>
      <span>{{items.title}}</span>
    </label>
  </div>
</div>

в вашем ts:

this.bottom-border = false;    
ngOnInit() {

        this.service.getResults().subscribe(
          (response: any) => {
              this.searchItemsData = response; 
              this.varible= false;
              this.bottom-border = true;
          },
          error => {
            console.log(error);
          }
        );
      }

РЕДАКТИРОВАТЬ: также удалить нижнюю границуот CSS