我已经制作了一个自定义组件:
@Component({
selector: 'comp-rating',
templateUrl: 'comp-rating.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CompRatingComponent {
@Input() public score: number = 1;
@Input() public max: number = 5;
@Input() public width: number = 150;
@Input() public height: number = 138;
@Input() public prefix: string = '';
@Output() public update: EventEmitter<number> = new EventEmitter();
constructor() {
}
onUpdate(score: number): void {
if(score === 0.5) {
score = 1;
}
this.score = score;
this.update.emit(this.score);
console.debug(this.update);
}
public icons(): string[] {
let step = 0.5;
let score = Math.ceil(this.score / step) * step;
let icons = [];
for (let i = 1; i <= this.max; i++) {
if (i <= score) {
icons.push('<img src="../../assets/images/rating-full.png" usemap="#' + this.prefix + '-' + i + '">');
} else if (i - step <= score) {
icons.push('<img src="../../assets/images/rating-half.png" usemap="#' + this.prefix + '-' + i + '">');
} else {
icons.push('<img src="../../assets/images/rating-empty.png" usemap="#' + this.prefix + '-' + i + '">');
}
}
return icons;
}
}
当我单独使用此组件时,效果很好。 但是当我在ngFor上使用它时,EventEmitter找不到Observer ... 我的html:
<ng-container *ngFor="let critere of criterions">
<ion-list no-lines>
<comp-rating [prefix]="'critere-' + critere.id_criterion + '-'" [score]="1" [max]="5" [width]="100" [height]="90" (update)="onCritereRatingChange($event)"></comp-rating>
</ion-list>
</ng-container>
如果有人有ID,如何解决观察者的问题。