Question

我正在使用ngStyle

设置我的应用程序的背景

喜欢这个<div [ngStyle]="{'background-image': 'url(' + photo + ')','height':'100%','width':'100%','margin':'0px'}" >

但是在我的一个由路由器插座加载的组件中，数据较少，只有半页获得背景，其余所有其他页面都很好。

如何解决此错误。

数据较少的组件模板

<div *ngIf="visibleTournament">
  <div class = "row">
    <div *ngFor="let entry of competitionTeams | keys">
      <div class="col-md-4" (mouseleave)= "entry.hideme = false">
        <div>
          <div (click) = "entry.hideme = !entry.hideme" >
            <div class = "groupBox"><div class="placed"><h3><span class = "label label-warning">Group - {{entry.key}}</span></h3></div></div>
          </div>
          <div class="well box" [hidden] = "!entry.hideme">
            <table class="table">
              <thead class="thead-inverse">
              <tr>
                <th>#</th>
                <th>Team</th>
                <th>Played Games</th>
                <th>Points</th>
                <th>Goals</th>
                <th>GA</th>
                <th>GD</th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let subValue of entry.value">
                <th scope="row">{{subValue.rank}}</th>
                <td><img class="img-thumbnail small" src="{{subValue.crestURI}}">{{subValue.team}}</td>
                <td>{{subValue.playedGames}}</td>
                <td>{{subValue.points}}</td>
                <td>{{subValue.goals}}</td>
                <td>{{subValue.goalsAgainst}}</td>
                <td>{{subValue.goalDifference}}</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

此组件的CSS文件

.avatar{
  width:30px;
  height:30px;
  margin-right: 10px;
  background: rgba(0,0,0,0);
  border: none;
}

.inline{
  display: inline-block;
  margin: 10px 20px;
}

.check{
  min-width: 500px;
}

.selector{
  cursor: pointer;
}
.placed{
  margin: 0 auto;
}

.box{
  /*position: absolute;*/
  text-align: center;
  background: #ccffda;
  padding: 10px 20px;
  max-width: 500px;
  border: darkgray 1px solid;
  z-index: 1;
}


.groupBox{
  /*position: relative;*/
  text-align: center;
  background: rgba(0,0,0,0.3);
  padding: 20px 20px;
  margin: 2px;
  border: darkgray 1px solid;
  cursor: pointer;
}

th {
  white-space: nowrap;
}

.col-md-4{
  margin-bottom: 80px;

}

.fix{
  position: absolute;
}

.group{
  /*background: rgba(0,0,0,0.4);*/
}
table th {
  font-weight: bolder;
  /*color:#49fb35;*/
}

.small{
  width:20px;
  height:20px;
  background: rgba(0,0,0,0);
  border: none;
}

参考我的应用程序组件

<div  [ngStyle]="{'background-image': 'url(' + photo + ')','height':'100%','width':'100%','margin':'0px'}" >
  <nav class="navbar navbar-inverse">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" routerLink = "home">Football Data</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </nav>

  <div class = "container">
    <div class = "row">
      <div class = "col-md-12">
        <div *ngIf="loading">
          <!-- show something fancy here, here with Angular 2 Material's loading bar or circle -->
          <div class = "parent">
            <div class="spinner">
              <div class="rect1"></div>
              <div class="rect2"></div>
              <div class="rect3"></div>
              <div class="rect4"></div>
              <div class="rect5"></div>
            </div>
          </div>
          <!--<progress-bar [value]="50" [max]="100"></progress-bar> // Simple Progess Bar-->
        </div>
        <router-outlet></router-outlet>
      </div>
    </div>
  </div>
</div>

Appcomponent css

html, body{
  height: 100%;
  font-family: Arial, Helvetica, sans-serif
}

a.active {
  background-color: gray;
}

h1 {
  color: #00BCD4;
}


.parent{
  position: fixed;
  left:0;
  right:0;
  top: 0;
  bottom: 0;
  background: rgba(0,0,0,0.1);
  display: flex; /* establish flex container */
  flex-direction: column; /* make main-axis vertical */
  justify-content: center; /* align items vertically, in this case */
  align-items: center; /* align items horizontally, in this case */
}

.spinner {
  margin: 100px auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}



.spinner > div {
  background-color: black;
  height: 100%;
  width: 6px;
  display: inline-block;

  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
       transform: scaleY(1.0);
       -webkit-transform: scaleY(1.0);
     }
}

组件如何在浏览器中加载

Answer 1

我不知道你的想法

<div  [ngStyle]="{'background-image': 'url(' + photo + ')','height':'100%','width':'100%','margin':'0px'}" >

但是这里的结果是CSS：

{
   background-image: url(photo);
   height: 100%;
   width: 100%;
   margin: 0;
}

现在也许您认为这应该使background-image伸展到100% <div> (photo)的宽度和高度，但......它真的不是。

如果background-size小于div，则必须设置div的cover属性才能使图像覆盖所有背景。

您应将其设为CSS。

提示：当您需要AngularJS的帮助时，如果您跳过CSS部分，只需询问：这是我的结果background-image ，为什么我的照片不是全尺寸？你大大增加了快速得到正确答案的机会，甚至可能来自一个不了解AngularJS的人（以及谁不需要了解它，以帮助你）。

如果我的答案没有解决您的问题，您需要创建一个最小，完整且可验证的示例，以便我们检查并了解您HTML不适用的原因。无论您的应用发生什么，它仍会输出CSS + JS + {{1}}。这就是你需要帮助的地方。

背景仅适用于半页

1 个答案: