2
私は携帯電話を評価するいくつかのコードを書いています。そこで、HTMLファイルとCSSファイルを作成しました。私は4と5として評価を与えている。しかし、それは5つの星だけとして両方を表示しています。私がデバッグすると、入力は「4」と表示されますが、「5」と表示され、星は2行に表示されます。Typescriptの評価コンポーネントが正しく表示されない
問題点を示す画像：
が、私はここに私のコードを添付しています。 私を助けてください。任意の助けを事前に
評価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>感謝。
..事前に感謝し、私を助けてください –
あなたのコードを再配置し、我々は間違って何が起こっているかを確認することができますので、これは一つの方法である置くことができます。またはjsfiddleを作成してください！ –
私は2つのhtmlファイルと2つのtypecriptファイルを持っています...私は別のhtmlファイルに1つのhtmlをインポートしています –