如何在angular 2中的star rating插件中传递动态值？
我试图显示以浮点开始（4.3/5）。如果我将静态值赋予如何在angular 2中的star rating插件中传递动态值？,angular,Angular,我试图显示以浮点开始（4.3/5）。如果我将静态值赋予stars selected=“2.5”，下面的代码工作正常 如果我在angular 2中给出动态值，比如stars selected=“{{CityList.rating}}”，它将不起作用 我犯了个错误 未处理的承诺拒绝：模板分析错误：无法绑定到 “stars selected”，因为它不是“stars”的已知属性。 （“yList.name}} {{CityList.rating} ]stars selected=“{CityList.
stars selected=“2.5”stars selected=“{{CityList.rating}}” import {Component, ElementRef} from '@angular/core';
@Component({
selector: 'star-item',
inputs: ['radius', 'type', 'backColor'],
styles: [`
canvas.star {
float: left;
z-index: 1;
}
`],
template: `
<canvas
class="star"
height="{{ radius*2 }}"
width="{{ radius*2 }}"></canvas>`
})
export class StarItemComponent {
radius: number;
root: ElementRef;
backColor: string;
type: string;
constructor(myElement: ElementRef) {
this.root = myElement;
}
// Entry point for item drawing
drawItem(type: string, ctx: CanvasRenderingContext2D, r: number) {
return typeof this[type] === 'function' ? this[type](ctx, r) : this.star(ctx, r);
}
// Draw star image
star(ctx: CanvasRenderingContext2D, r: number) {
if (!ctx) throw Error('No Canvas context found!');
ctx.save();
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.translate(r, r);
ctx.moveTo(0, 0 - r);
for (var i = 0; i < 5; i++) {
ctx.rotate(Math.PI / 5);
ctx.lineTo(0, 0 - (r * 0.5));
ctx.rotate(Math.PI / 5);
ctx.lineTo(0, 0 - r);
}
ctx.fill();
ctx.restore();
}
// Draw circle image
circle(ctx: CanvasRenderingContext2D, r: number) {
if (!ctx) throw Error('No Canvas context found!');
ctx.save();
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.arc(r, r, r, 0, 2 * Math.PI, false);
ctx.fill();
ctx.restore();
}
// Draw main canvas area
drawRect(ctx: CanvasRenderingContext2D, dim: number, backColor: string) {
if (!ctx) throw Error('No Canvas context found!');
ctx.save();
ctx.fillStyle = backColor;
ctx.fillRect(0, 0, dim, dim);
ctx.restore();
}
// Hook: draw canvas image on the template rendered
ngOnInit() {
setTimeout(() => {
const el: HTMLCanvasElement = this.root.nativeElement.querySelector('.star');
const ctx: CanvasRenderingContext2D = el.getContext("2d");
this.drawRect(ctx, this.radius * 2, this.backColor);
this.drawItem(this.type, ctx, this.radius);
});
}
}
import {Component, ElementRef} from '@angular/core';
@Component({
selector: 'stars',
styles: [`
.stars {
display: inline-block;
position: relative;
z-index: 0;
}
.stars-selected {
position: absolute;
max-width: 100%;
height: 100%;
z-index: -1;
}
`],
template: `
<div class="stars"
[ngStyle]="{'background-color': starBackColor}"
(click)="secureNewRating()"
(mouseleave)="leaveRating()"
(mousemove)="changeRating($event)">
<div class="stars-selected"
[ngStyle]="{'width': selectedWidth, 'background-color': selectedColor}"></div>
<star-item *ngFor="let i of itemsIterable" [type]="type" [backColor]="backColor" [radius]="radius"></star-item>
</div>
`
})
export class StarComponent {
radius: number;
type: string;
items: number;
itemsIterable: number[];
selectedColor: string;
backColor: string;
starBackColor: string;
securedWidth: string;
selectedWidth: string;
percent: string;
starsSelected: number;
disabled: boolean;
el: ElementRef;
elDimensions: ClientRect;
starsSelectedNew: number;
constructor(el: ElementRef) {
const nativeEl = el.nativeElement;
const getAttr = (nEl: HTMLElement, attr: string, def?: string) :string => nEl.getAttribute(attr) || def;
// Pass attributes into app
this.selectedColor = getAttr(nativeEl, 'sel-color', '#e6a719');
this.backColor = getAttr(nativeEl, 'back-color', 'white');
this.starBackColor = getAttr(nativeEl, 'star-back-color', 'lightgray');
this.radius = parseInt(getAttr(nativeEl, 'radius', '30'), 10);
this.items = parseInt(getAttr(nativeEl, 'items', '5'), 10);
this.percent = getAttr(nativeEl, 'percent', '0') + '%';
this.starsSelected = parseFloat(getAttr(nativeEl, 'stars-selected', '0'));
this.starsSelectedNew= parseFloat(getAttr(nativeEl, 'starsSelectedNew', '0'));
//this.starsSelected = this.starsSelectedNew;
console.log(this.starsSelected);
this.disabled = !!getAttr(nativeEl, 'disabled');
this.type = getAttr(nativeEl, 'type', 'star');
this.itemsIterable = new Array(this.items);
this.securedWidth = this.starsSelected ? 100 / this.items * this.starsSelected + '%' : this.percent;
this.elDimensions = nativeEl.getBoundingClientRect();
this.el = el;
// initial rating setup
this.selectedWidth = this.securedWidth;
}
changeRating(e: MouseEvent) {
this.selectedWidth = !this.disabled && e.clientX - this.elDimensions.left + 'px';
this.percent = parseInt(this.selectedWidth, 10) / this.radius * 2 * this.items + '%';
}
leaveRating() {
this.selectedWidth = this.securedWidth;
}
secureNewRating() {
this.securedWidth = this.percent;
}
}
<div *ngFor="let CityList of FoodList.categorylistvalues; let i = index; ">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 " >
<p>{{CityList.rating}}<stars stars="5" radius="8" stars-selected="2.5" disabled="true"></stars></p>
</div>
</div>
{{CityList.rating}
import {Component, ElementRef} from '@angular/core';
@Component({
selector: 'star-item',
inputs: ['radius', 'type', 'backColor'],
styles: [`
canvas.star {
float: left;
z-index: 1;
}
`],
template: `
<canvas
class="star"
height="{{ radius*2 }}"
width="{{ radius*2 }}"></canvas>`
})
export class StarItemComponent {
radius: number;
root: ElementRef;
backColor: string;
type: string;
constructor(myElement: ElementRef) {
this.root = myElement;
}
// Entry point for item drawing
drawItem(type: string, ctx: CanvasRenderingContext2D, r: number) {
return typeof this[type] === 'function' ? this[type](ctx, r) : this.star(ctx, r);
}
// Draw star image
star(ctx: CanvasRenderingContext2D, r: number) {
if (!ctx) throw Error('No Canvas context found!');
ctx.save();
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.translate(r, r);
ctx.moveTo(0, 0 - r);
for (var i = 0; i < 5; i++) {
ctx.rotate(Math.PI / 5);
ctx.lineTo(0, 0 - (r * 0.5));
ctx.rotate(Math.PI / 5);
ctx.lineTo(0, 0 - r);
}
ctx.fill();
ctx.restore();
}
// Draw circle image
circle(ctx: CanvasRenderingContext2D, r: number) {
if (!ctx) throw Error('No Canvas context found!');
ctx.save();
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.arc(r, r, r, 0, 2 * Math.PI, false);
ctx.fill();
ctx.restore();
}
// Draw main canvas area
drawRect(ctx: CanvasRenderingContext2D, dim: number, backColor: string) {
if (!ctx) throw Error('No Canvas context found!');
ctx.save();
ctx.fillStyle = backColor;
ctx.fillRect(0, 0, dim, dim);
ctx.restore();
}
// Hook: draw canvas image on the template rendered
ngOnInit() {
setTimeout(() => {
const el: HTMLCanvasElement = this.root.nativeElement.querySelector('.star');
const ctx: CanvasRenderingContext2D = el.getContext("2d");
this.drawRect(ctx, this.radius * 2, this.backColor);
this.drawItem(this.type, ctx, this.radius);
});
}
}
import {Component, ElementRef} from '@angular/core';
@Component({
selector: 'stars',
styles: [`
.stars {
display: inline-block;
position: relative;
z-index: 0;
}
.stars-selected {
position: absolute;
max-width: 100%;
height: 100%;
z-index: -1;
}
`],
template: `
<div class="stars"
[ngStyle]="{'background-color': starBackColor}"
(click)="secureNewRating()"
(mouseleave)="leaveRating()"
(mousemove)="changeRating($event)">
<div class="stars-selected"
[ngStyle]="{'width': selectedWidth, 'background-color': selectedColor}"></div>
<star-item *ngFor="let i of itemsIterable" [type]="type" [backColor]="backColor" [radius]="radius"></star-item>
</div>
`
})
export class StarComponent {
radius: number;
type: string;
items: number;
itemsIterable: number[];
selectedColor: string;
backColor: string;
starBackColor: string;
securedWidth: string;
selectedWidth: string;
percent: string;
starsSelected: number;
disabled: boolean;
el: ElementRef;
elDimensions: ClientRect;
starsSelectedNew: number;
constructor(el: ElementRef) {
const nativeEl = el.nativeElement;
const getAttr = (nEl: HTMLElement, attr: string, def?: string) :string => nEl.getAttribute(attr) || def;
// Pass attributes into app
this.selectedColor = getAttr(nativeEl, 'sel-color', '#e6a719');
this.backColor = getAttr(nativeEl, 'back-color', 'white');
this.starBackColor = getAttr(nativeEl, 'star-back-color', 'lightgray');
this.radius = parseInt(getAttr(nativeEl, 'radius', '30'), 10);
this.items = parseInt(getAttr(nativeEl, 'items', '5'), 10);
this.percent = getAttr(nativeEl, 'percent', '0') + '%';
this.starsSelected = parseFloat(getAttr(nativeEl, 'stars-selected', '0'));
this.starsSelectedNew= parseFloat(getAttr(nativeEl, 'starsSelectedNew', '0'));
//this.starsSelected = this.starsSelectedNew;
console.log(this.starsSelected);
this.disabled = !!getAttr(nativeEl, 'disabled');
this.type = getAttr(nativeEl, 'type', 'star');
this.itemsIterable = new Array(this.items);
this.securedWidth = this.starsSelected ? 100 / this.items * this.starsSelected + '%' : this.percent;
this.elDimensions = nativeEl.getBoundingClientRect();
this.el = el;
// initial rating setup
this.selectedWidth = this.securedWidth;
}
changeRating(e: MouseEvent) {
this.selectedWidth = !this.disabled && e.clientX - this.elDimensions.left + 'px';
this.percent = parseInt(this.selectedWidth, 10) / this.radius * 2 * this.items + '%';
}
leaveRating() {
this.selectedWidth = this.securedWidth;
}
secureNewRating() {
this.securedWidth = this.percent;
}
}
<div *ngFor="let CityList of FoodList.categorylistvalues; let i = index; ">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 " >
<p>{{CityList.rating}}<stars stars="5" radius="8" stars-selected="2.5" disabled="true"></stars></p>
</div>
</div>
{{CityList.rating}
import {Component, ElementRef} from '@angular/core';
@Component({
selector: 'star-item',
inputs: ['radius', 'type', 'backColor'],
styles: [`
canvas.star {
float: left;
z-index: 1;
}
`],
template: `
<canvas
class="star"
height="{{ radius*2 }}"
width="{{ radius*2 }}"></canvas>`
})
export class StarItemComponent {
radius: number;
root: ElementRef;
backColor: string;
type: string;
constructor(myElement: ElementRef) {
this.root = myElement;
}
// Entry point for item drawing
drawItem(type: string, ctx: CanvasRenderingContext2D, r: number) {
return typeof this[type] === 'function' ? this[type](ctx, r) : this.star(ctx, r);
}
// Draw star image
star(ctx: CanvasRenderingContext2D, r: number) {
if (!ctx) throw Error('No Canvas context found!');
ctx.save();
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.translate(r, r);
ctx.moveTo(0, 0 - r);
for (var i = 0; i < 5; i++) {
ctx.rotate(Math.PI / 5);
ctx.lineTo(0, 0 - (r * 0.5));
ctx.rotate(Math.PI / 5);
ctx.lineTo(0, 0 - r);
}
ctx.fill();
ctx.restore();
}
// Draw circle image
circle(ctx: CanvasRenderingContext2D, r: number) {
if (!ctx) throw Error('No Canvas context found!');
ctx.save();
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.arc(r, r, r, 0, 2 * Math.PI, false);
ctx.fill();
ctx.restore();
}
// Draw main canvas area
drawRect(ctx: CanvasRenderingContext2D, dim: number, backColor: string) {
if (!ctx) throw Error('No Canvas context found!');
ctx.save();
ctx.fillStyle = backColor;
ctx.fillRect(0, 0, dim, dim);
ctx.restore();
}
// Hook: draw canvas image on the template rendered
ngOnInit() {
setTimeout(() => {
const el: HTMLCanvasElement = this.root.nativeElement.querySelector('.star');
const ctx: CanvasRenderingContext2D = el.getContext("2d");
this.drawRect(ctx, this.radius * 2, this.backColor);
this.drawItem(this.type, ctx, this.radius);
});
}
}
import {Component, ElementRef} from '@angular/core';
@Component({
selector: 'stars',
styles: [`
.stars {
display: inline-block;
position: relative;
z-index: 0;
}
.stars-selected {
position: absolute;
max-width: 100%;
height: 100%;
z-index: -1;
}
`],
template: `
<div class="stars"
[ngStyle]="{'background-color': starBackColor}"
(click)="secureNewRating()"
(mouseleave)="leaveRating()"
(mousemove)="changeRating($event)">
<div class="stars-selected"
[ngStyle]="{'width': selectedWidth, 'background-color': selectedColor}"></div>
<star-item *ngFor="let i of itemsIterable" [type]="type" [backColor]="backColor" [radius]="radius"></star-item>
</div>
`
})
export class StarComponent {
radius: number;
type: string;
items: number;
itemsIterable: number[];
selectedColor: string;
backColor: string;
starBackColor: string;
securedWidth: string;
selectedWidth: string;
percent: string;
starsSelected: number;
disabled: boolean;
el: ElementRef;
elDimensions: ClientRect;
starsSelectedNew: number;
constructor(el: ElementRef) {
const nativeEl = el.nativeElement;
const getAttr = (nEl: HTMLElement, attr: string, def?: string) :string => nEl.getAttribute(attr) || def;
// Pass attributes into app
this.selectedColor = getAttr(nativeEl, 'sel-color', '#e6a719');
this.backColor = getAttr(nativeEl, 'back-color', 'white');
this.starBackColor = getAttr(nativeEl, 'star-back-color', 'lightgray');
this.radius = parseInt(getAttr(nativeEl, 'radius', '30'), 10);
this.items = parseInt(getAttr(nativeEl, 'items', '5'), 10);
this.percent = getAttr(nativeEl, 'percent', '0') + '%';
this.starsSelected = parseFloat(getAttr(nativeEl, 'stars-selected', '0'));
this.starsSelectedNew= parseFloat(getAttr(nativeEl, 'starsSelectedNew', '0'));
//this.starsSelected = this.starsSelectedNew;
console.log(this.starsSelected);
this.disabled = !!getAttr(nativeEl, 'disabled');
this.type = getAttr(nativeEl, 'type', 'star');
this.itemsIterable = new Array(this.items);
this.securedWidth = this.starsSelected ? 100 / this.items * this.starsSelected + '%' : this.percent;
this.elDimensions = nativeEl.getBoundingClientRect();
this.el = el;
// initial rating setup
this.selectedWidth = this.securedWidth;
}
changeRating(e: MouseEvent) {
this.selectedWidth = !this.disabled && e.clientX - this.elDimensions.left + 'px';
this.percent = parseInt(this.selectedWidth, 10) / this.radius * 2 * this.items + '%';
}
leaveRating() {
this.selectedWidth = this.securedWidth;
}
secureNewRating() {
this.securedWidth = this.percent;
}
}
从'@angular/core'导入{Component，ElementRef}；
@组成部分({
选择器：'星型项目'，
输入：[“半径”、“类型”、“背景色”]，
风格：[`
巨星{
浮动：左；
z指数：1；
}
`],
模板：`
`
})
导出类StarItemComponent{
半径：数字；
根：ElementRef；
背景颜色：字符串；
类型：字符串；
构造函数（myElement:ElementRef）{
this.root=myElement；
}
//项目图纸的入口点
drawItem（类型：string，ctx:CanvasRenderingContext2D，r:number）{
返回此[type]=“function”？此[type]（ctx，r）：此.star（ctx，r）；
}
//绘制星图
星形（ctx:CanvasRenderingContext2D，r:number）{
如果（！ctx）抛出错误（'未找到画布上下文！'）；
ctx.save（）；
ctx.globalCompositeOperation='destination out'；
ctx.beginPath（）；
翻译（r，r）；
ctx.moveTo（0，0-r）；
对于（变量i=0；i<5；i++）{
ctx.旋转（数学PI/5）；
ctx.lineTo（0,0-（r*0.5））；
ctx.旋转（数学PI/5）；
ctx.lineTo（0，0-r）；
}
ctx.fill（）；
ctx.restore（）；
}
//画圆图
圆圈（ctx:CanvasRenderingContext2D，r:number）{
如果（！ctx）抛出错误（'未找到画布上下文！'）；
ctx.save（）；
ctx.globalCompositeOperation='destination out'；
ctx.beginPath（）；
弧（r，r，r，0，2*Math.PI，false）；
ctx.fill（）；
ctx.restore（）；
}
//绘制主画布区域
drawRect（ctx:CanvasRenderingContext2D，尺寸：数字，背景色：字符串）{
如果（！ctx）抛出错误（'未找到画布上下文！'）；
ctx.save（）；
ctx.fillStyle=背景色；
ctx.fillRect（0，0，dim，dim）；
ctx.restore（）；
}
//钩子：在渲染的模板上绘制画布图像
恩戈尼尼特（）{
设置超时（（）=>{
const el:htmlcanvaseElement=this.root.nativeElement.querySelector（'.star'）；
const ctx:canvasrendingcontext2d=el.getContext（“2d”）；
this.drawRect（ctx，this.radius*2，this.backColor）；
this.drawItem（this.type，ctx，this.radius）；
});
}
}
import {Component, ElementRef} from '@angular/core';
@Component({
selector: 'star-item',
inputs: ['radius', 'type', 'backColor'],
styles: [`
canvas.star {
float: left;
z-index: 1;
}
`],
template: `
<canvas
class="star"
height="{{ radius*2 }}"
width="{{ radius*2 }}"></canvas>`
})
export class StarItemComponent {
radius: number;
root: ElementRef;
backColor: string;
type: string;
constructor(myElement: ElementRef) {
this.root = myElement;
}
// Entry point for item drawing
drawItem(type: string, ctx: CanvasRenderingContext2D, r: number) {
return typeof this[type] === 'function' ? this[type](ctx, r) : this.star(ctx, r);
}
// Draw star image
star(ctx: CanvasRenderingContext2D, r: number) {
if (!ctx) throw Error('No Canvas context found!');
ctx.save();
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.translate(r, r);
ctx.moveTo(0, 0 - r);
for (var i = 0; i < 5; i++) {
ctx.rotate(Math.PI / 5);
ctx.lineTo(0, 0 - (r * 0.5));
ctx.rotate(Math.PI / 5);
ctx.lineTo(0, 0 - r);
}
ctx.fill();
ctx.restore();
}
// Draw circle image
circle(ctx: CanvasRenderingContext2D, r: number) {
if (!ctx) throw Error('No Canvas context found!');
ctx.save();
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.arc(r, r, r, 0, 2 * Math.PI, false);
ctx.fill();
ctx.restore();
}
// Draw main canvas area
drawRect(ctx: CanvasRenderingContext2D, dim: number, backColor: string) {
if (!ctx) throw Error('No Canvas context found!');
ctx.save();
ctx.fillStyle = backColor;
ctx.fillRect(0, 0, dim, dim);
ctx.restore();
}
// Hook: draw canvas image on the template rendered
ngOnInit() {
setTimeout(() => {
const el: HTMLCanvasElement = this.root.nativeElement.querySelector('.star');
const ctx: CanvasRenderingContext2D = el.getContext("2d");
this.drawRect(ctx, this.radius * 2, this.backColor);
this.drawItem(this.type, ctx, this.radius);
});
}
}
import {Component, ElementRef} from '@angular/core';
@Component({
selector: 'stars',
styles: [`
.stars {
display: inline-block;
position: relative;
z-index: 0;
}
.stars-selected {
position: absolute;
max-width: 100%;
height: 100%;
z-index: -1;
}
`],
template: `
<div class="stars"
[ngStyle]="{'background-color': starBackColor}"
(click)="secureNewRating()"
(mouseleave)="leaveRating()"
(mousemove)="changeRating($event)">
<div class="stars-selected"
[ngStyle]="{'width': selectedWidth, 'background-color': selectedColor}"></div>
<star-item *ngFor="let i of itemsIterable" [type]="type" [backColor]="backColor" [radius]="radius"></star-item>
</div>
`
})
export class StarComponent {
radius: number;
type: string;
items: number;
itemsIterable: number[];
selectedColor: string;
backColor: string;
starBackColor: string;
securedWidth: string;
selectedWidth: string;
percent: string;
starsSelected: number;
disabled: boolean;
el: ElementRef;
elDimensions: ClientRect;
starsSelectedNew: number;
constructor(el: ElementRef) {
const nativeEl = el.nativeElement;
const getAttr = (nEl: HTMLElement, attr: string, def?: string) :string => nEl.getAttribute(attr) || def;
// Pass attributes into app
this.selectedColor = getAttr(nativeEl, 'sel-color', '#e6a719');
this.backColor = getAttr(nativeEl, 'back-color', 'white');
this.starBackColor = getAttr(nativeEl, 'star-back-color', 'lightgray');
this.radius = parseInt(getAttr(nativeEl, 'radius', '30'), 10);
this.items = parseInt(getAttr(nativeEl, 'items', '5'), 10);
this.percent = getAttr(nativeEl, 'percent', '0') + '%';
this.starsSelected = parseFloat(getAttr(nativeEl, 'stars-selected', '0'));
this.starsSelectedNew= parseFloat(getAttr(nativeEl, 'starsSelectedNew', '0'));
//this.starsSelected = this.starsSelectedNew;
console.log(this.starsSelected);
this.disabled = !!getAttr(nativeEl, 'disabled');
this.type = getAttr(nativeEl, 'type', 'star');
this.itemsIterable = new Array(this.items);
this.securedWidth = this.starsSelected ? 100 / this.items * this.starsSelected + '%' : this.percent;
this.elDimensions = nativeEl.getBoundingClientRect();
this.el = el;
// initial rating setup
this.selectedWidth = this.securedWidth;
}
changeRating(e: MouseEvent) {
this.selectedWidth = !this.disabled && e.clientX - this.elDimensions.left + 'px';
this.percent = parseInt(this.selectedWidth, 10) / this.radius * 2 * this.items + '%';
}
leaveRating() {
this.selectedWidth = this.securedWidth;
}
secureNewRating() {
this.securedWidth = this.percent;
}
}
从'@angular/core'导入{Component，ElementRef}；
@组成部分({
选择器：'星星'，
风格：[`
.明星{
显示：内联块；
位置：相对位置；
z指数：0；
}
.入选明星{
位置：绝对位置；
最大宽度：100%；
身高：100%；
z指数：-1；
}
`],
模板：`
`
})
导出类StarComponent{
半径：数字；
类型：字符串；
项目：数量；
itemsIterable:number[]；
selectedColor:字符串；
背景颜色：字符串；
starBackColor：字符串；
securedWidth：字符串；
selectedWidth：字符串；
百分比：字符串；
所选标准：编号；
禁用：布尔值；
el:ElementRef；
ELD尺寸：ClientRect；
starsSelectedNew：编号；
构造函数（el:ElementRef）{
const nativeEl=el.nativeElement；
常量getAttr=（nEl:HTMLElement，attr:string，def？：string）：string=>nEl.getAttribute（attr）| def；
//将属性传递到应用程序
this.selectedColor=getAttr（nativeEl，'sel color'，'#e6a719'）；
this.backColor=getAttr（nativeEl，'backColor'，'white'）；
this.starBackColor=getAttr（nativeEl，'starBackColor'，'lightgray'）；
this.radius=parseInt（getAttr（nativeEl，'radius'，'30'），10）；
this.items=parseInt（getAttr（nativeEl，'items'，'5'），10）；
this.percent=getAttr（nativeEl，'percent'，'0'）+'%；
this.starsSelected=parseFloat（getAttr（nativeEl，'starsSelected'，'0'）；
this.starsSelectedNew=parseFloat（getAttr（nativeEl，'starsSelectedNew'，'0'）；
//this.starsSelected=this.starsSelectedNew；
console.log（选择this.stars）；
this.disabled=！！getAttr（nativeEl，'disabled'）；
this.type=getAttr（nativeEl，'type'，'star'）；
this.itemsIterable=新数组（this.items）；
this.securedWidth=this.starsSelected？100/this.items*this.starsSelected+'%'：this.percent；
this.elDimensions=nativeEl.getBoundingClientRect（）；
this.el=el；
//初始评级设置
this.selectedWidth=this.securedWidth；
}
更改（e:MouseEvent）{
this.selectedWidth=！this.disabled&&e.clientX-this.elDimensions.left+'px'；
this.percent=parseInt（this.selected