Question

loading issue screenshot我在div中使用了带for循环的标签框。在标签CSS中，我使用了底边框属性。问题是，页面加载时，只有底部边框线可见。内容加载后，图像将在img标签中可见。我想在加载时删除border-bottom。通过订阅获取数据后，[hidden]变量设置为false。

文件数据如下所述。

.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文件

public varible: boolean = true;
ngOnInit() {

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

Answer 1

您必须为该边框添加标志并将其默认设置为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删除底部边框

Answer 2

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

此行更改为喜欢

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

在内容加载之前在CSS中隐藏底部边框

2 个答案: