Question

我写了一些代码来评分。所以我创建了HTML和CSS文件。我给出的等级为4和5.但它只显示为5星。当我调试它时输入为＆＃34; 4＆＃34;但显示为＆＃34; 5＆＃34;并且星星显示在两行上。

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

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

评级component.html

＆＃13;

//**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);
  }

}

＆＃13;

/*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;
}

＆＃13;

<!--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>

＆＃13;

提前感谢您的帮助。

Answer 1

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

＆＃13;

 public static class SqlExtensions
{
    public static DbConnection _con => DbConnectionInstance.DefaultInstance.Connection;

    public static T[] Query<T>(this string query, object i) where T: new()
    {
        return _con.Query<T>(query, i).ToArray();
    }

    public static T[] Query<T>(this string query) where T : new()
    {
        return _con.Query<T>(query).ToArray();
    }

    public static bool Query(this string query)
    {
        return _con.Execute(query) > 0;
    }

    public static bool Query(this string query, object i)
    {
        return _con.Execute(query, i) > 0;
    }

    public static int Query(this string query, object i)
    {

    }
}

＆＃13;

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

＆＃13;

首先，从包含您明星的<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>中删除Tahoma似乎可以解决您的包装问题。我假设Tahoma的字形宽度与用于显示星星的<td>的字形宽度不同。

这可以通过将类名应用于Bootstrap Glyphicons Halflings（例如<td>）并使用class="star-ratings"否定伪类将其排除在CSS中来完成。

:not()

虽然这似乎解决了这个问题（至少在Chrome中），但它本身并不是一个非常可行的解决方案。除上述内容外，请将td:not(.star-ratings) { font-family: Tahoma; }应用于white-space:nowrap。这可以防止星星缠绕到第二行。

#star

我还会移除应用于#star { white-space: nowrap; }的硬编码内联宽度86px。内联样式比其他规则集具有更高的特异性，因此这将取代CSS中应用的#star的宽度。这给我们留下了以下内容：

＆＃13;

100px

＆＃13;

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

＆＃13;

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

1 个答案: