2
휴대 전화를 평가하는 코드를 작성했습니다. 그래서 HTML과 CSS 파일을 만들었습니다. 나는 4 점과 5 점으로 등급을 매겼지만, 5 점만으로 점수를 표시했다. 디버깅 할 때 입력을 "4"로 표시하지만 "5"로 표시하면 별이 두 줄에 걸쳐 표시됩니다.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를 만드십시오! –
나는 두 개의 html 파일과 두 개의 타이프 스크립트 파일을 가지고있다. 하나의 html 파일을 다른 html 파일로 가져오고있다. –