打字稿评级组件未正确显示

Question

我写了一些代码来评价。所以我创建了 HTML 和 CSS 文件。我给出了 4 和 5 的评级。但它只显示为 5 星。当我调试时，输入为“4”但显示为“5”，星星显示在两行上。

显示问题的图像：
![两行星星][2]

我在这里附上我的代码。请帮助我。

评分component.html

//**rating.component.ts**


    import {
      Component,
      OnChanges,
      Input
    } from '@angular/core';

    @Component({
      selector: 'app-rating',
      templateUrl: './rating.component.html',
      styleUrls: ['./rating.component.css']
    })
    export class RatingComponent implements OnChanges {
      @Input() rating: number;

      starWidth: number;
      constructor() {
        console.log("star has created");
      }

      ngOnChanges() {
        console.log("star dynamically added");
        this.starWidth = this.rating * (86 / 5);
      }

    }
//mobile.component.ts
import {
  Component,
  OnInit
} from '@angular/core';
import {
  mobile
} from './mobile'

@Component({
  selector: 'app-mobiles',
  templateUrl: './mobiles.component.html',
  styleUrls: ['./mobiles.component.css']
})
export class MobilesComponent implements OnInit {
  title: string = 'MOBILE CART';
  image: string = 'assets/images/';
  click: boolean = false;
  showImages: boolean = true;
  refineMobile: string = " ";
  shop = 'assets/images/Cart.jpg';
  mobiles: mobile[] = [{
      //imageUrl: 'assets/download.jpg',
      imageUrl: 'download.jpg',
      mobile_name: 'Lenovo',
      mobile_price: 10000,
      mobile_code: 'K3',
      release_date: 'mar 19,2016',
      rating: 4
    },
    {
      //imageUrl: 'assets/download (1).jpg',
      imageUrl: 'download (1).jpg',
      mobile_name: 'samsung',
      mobile_price: 7000,
      mobile_code: 'ON-5',
      release_date: 'nov 18,2017',
      rating: 5
    }
  ];
  displayImages(): void {
    (this.showImages == true) ? this.showImages = false: this.showImages = true;
  }
  cart: number = 0;
  //adding items in cart
  inCart() {
    console.log("item are added in the cart");
    return this.cart++;
  }
  //clearing the cart
  clear() {
    return this.cart = 0;
  }

  ngOnInit(): void {
    console.log('oninit of angular is initialised');
  }

  //filter by name
  filterMobiles: mobile[];
  _listFilter: string;
  constructor() {
    this.filterMobiles = this.mobiles;
    this.listFilter = '';
  }
  get listFilter() {
    return this._listFilter;
  }
  set listFilter(value) {
    this._listFilter = value;
    this.filterMobiles = this.listFilter ? this.performFilter(this.listFilter) : this.mobiles;
  }
  performFilter(filterBy: string): mobile[] {
    filterBy = filterBy.toLocaleLowerCase();
    return this.mobiles.filter((mobile: mobile) =>
      mobile.mobile_name.toLocaleLowerCase().indexOf(filterBy) !== -1);
  }

}

/*rating.component.css*/
.crop {
  overflow: hidden;
}

div {
  cursor: pointer;
}
#star{
  color:gold;
}
/*mobile.componet.css/
h1,p{
  font-style: initial;
  color:green;
  text-align: center;
  border: dashed;
}

td {
  font-family: Tahoma;
}
.col-md-2{
  background-color: blue;
  color: white;
}
h4 {
  color: red;
  text-align: right;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, .1);
  height: 20px;
  padding: 3px 6px;
  font-weight: 500;
  display: inline-block;
  line-height: 12px;
  margin-left: 100px;
}
#clear{
  float:right;
}

<!--rating.component.html-->
<div class="crop"
     [style.width.px]="starWidth"
     [title]="rating">
  <div style="width: 86px" id="star">
    <span class="glyphicon glyphicon-star-empty"></span>
    <span class="glyphicon glyphicon-star-empty"></span>
    <span class="glyphicon glyphicon-star-empty"></span>
    <span class="glyphicon glyphicon-star-empty"></span>
    <span class="glyphicon glyphicon-star-empty"></span>
  </div>
</div>

<!--mobiles.component.html-->
<h1>MOBILE CART</h1>
<div class="container">
  <div class='col-md-2'>
    Refined by:{{listFilter}}
  </div>
  <div class='col-md-1'>
    <input type="text" [(ngModel)]="listFilter">
  </div>
</div>

<!--<h4>{{cart}}</h4>-->
<img src="{{shop}}" width="50" align="right" />

<table class="table ">

  <tr>
    <th>
      <button class='btn btn-primary' (click)="displayImages()">
        Display Images
      </button>
    </th>
    <!--<th>Image</th>-->
    <th>NAME</th>
    <th>PRICE</th>
    <th>CODE</th>
    <th>RELEASE DATE</th>
    <th>RATING</th>
    <th>CART </th>
  </tr>
  <tr *ngFor='let mobile of filterMobiles'>
    <td>
      <div [hidden]="showImages">
        <!--<img src="{{mobile.imageUrl}}" width="100" />-->
        <img [src]="image+mobile.imageUrl" width="100" />
      </div>
    </td>

    <td>
      {{mobile.mobile_name|uppercase}}
    </td>
    <td>
      {{mobile.mobile_price|currency:'INR':'1.2-2' }}
    </td>
    <td>
      {{mobile.mobile_code|separator:'_'}}
    </td>
    <td>
      {{mobile.release_date|date:'longDate'}}
    </td>
    <td >
      <!--{{mobile.rating}}-->
      <app-rating [rating]='mobile.rating'></app-rating>
    </td>
    <td>
      <button class="btn btn-primary" (click)="inCart()">
        Add to cart
      </button>
      <button class="btn btn-primary">
        Buy Now
      </button>
    </td>
  </tr>
</table>
<p>{{cart}} items are added into the cart</p>
<button class="btn btn-primary" (click)="clear()" id="clear">
  CLEAR
</button>

在此先感谢您的帮助。

Answer 1

由于这里的问题似乎是您的应用程序的呈现方式，我已将您的代码示例简化为 MCVE。所以这就是我们开始的地方：

.crop {
  overflow: hidden;
}
#star {
  color: gold;
  width: 100px;
}
td {
  font-family: Tahoma;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table">
  <tr>
    <td>
      <div class="crop" title="rating">
        <div style="width: 86px" id="star">
          <span class="glyphicon glyphicon-star-empty"></span>
          <span class="glyphicon glyphicon-star-empty"></span>
          <span class="glyphicon glyphicon-star-empty"></span>
          <span class="glyphicon glyphicon-star-empty"></span>
          <span class="glyphicon glyphicon-star-empty"></span>
        </div>
      </div>
    </td>
  </tr>
</table>

首先，从包含您的星星的 <td> 中删除 Tahoma 似乎可以解决您的包装问题。我假设 Tahoma 的字形宽度不同于用于显示星星的 Bootstrap Glyphicons Halflings 的字形宽度。

这可以通过将 class 名称应用于 <td>（例如 class="star-ratings"）并使用 :not() 在 CSS 中排除它来完成否定伪 class.

td:not(.star-ratings) {
  font-family: Tahoma;
}

虽然这似乎解决了问题（至少在 Chrome），但它本身并不是一个非常可行的解决方案。除了上述之外，将 white-space:nowrap 应用到 #star。这可以防止星星换行到第二行。

#star {
    white-space: nowrap;
}

我还会删除应用于 #star 的 86px 的硬编码内联宽度。内联样式比其他规则集具有更高的特异性，因此这将否决 CSS 中应用的 100px 的宽度。这给我们留下了以下内容：

.crop {
  overflow: hidden;
}
#star {
  color: gold;
  width: 100px;
  white-space: nowrap;
}
td:not(.star-ratings) {
  font-family: Tahoma;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table">
  <tr>
    <td class="star-ratings">
      <div class="crop" title="rating">
        <div id="star">
          <span class="glyphicon glyphicon-star-empty"></span>
          <span class="glyphicon glyphicon-star-empty"></span>
          <span class="glyphicon glyphicon-star-empty"></span>
          <span class="glyphicon glyphicon-star-empty"></span>
          <span class="glyphicon glyphicon-star-empty"></span>
        </div>
      </div>
    </td>
  </tr>
</table>

打字稿评级组件未正确显示

Typescript rating component not displayed correctly

css

angular

typescript

rating