Estou usando o angular pela primeira vez e fazendo uma lista de cursos e eles tem pontuações, e estou tentando colocar estrelas de acordo com suas pontuações. Pra isso, criei com o component. No html está dando esse erro do título, mas eu especifiquei o rating como number. Ainda tem um segundo erro dizendo que a propriedade rating não existe, mas existe. rs "Property 'rating' does not exist on type 'CourseListComponent'"
Segue o código HTML
<h2>Course List</h2>
<table class="table table-striped">
<thead>
<th>Image</th>
<th>Name</th>
<th>Price</th>
<th>Code</th>
<th>Rating</th>
<th>Options</th>
</thead>
<tbody>
<tr *ngFor="let course of courses">
<td>{{ course.imageUrl }}</td>
<td>{{ course.name }}</td>
<td>{{ course.price }}</td>
<td>{{ course.code }}</td>
<td>
<app-star [rating]="course - rating"></app-star>
</td>
<td></td>
</tr>
</tbody>
</table>
Agora, o código typescript
import { identifierModuleUrl } from '@angular/compiler';
export class Course {
id: number;
name: string;
imageUrl: string;
price: number;
code: string;
duration: number;
rating: number;
constructor(
id: number,
name: string,
imageUrl: '',
price: number,
code: string,
duration: number,
rating: number
) {
this.id = id;
this.name = name;
this.imageUrl = imageUrl;
this.price = price;
this.code = code;
this.duration = duration;
this.rating = rating;
}
}
A classe course é instanciada em
import { Component, OnInit } from '@angular/core';
import { Course } from './course';
@Component({
selector: 'app-course-list',
templateUrl: './course-list.component.html',
})
export class CourseListComponent implements OnInit {
courses: Course[] = [];
ngOnInit(): void {
this.courses = [
{
id: 1,
name: 'angular-forms',
imageUrl: '',
price: 99.99,
code: 'XPS-8967',
duration: 120,
rating: 4.6,
},
{
id: 2,
name: 'java-iniciante',
imageUrl: '',
price: 99.99,
code: 'XPS-7799',
duration: 120,
rating: 4.0,
},
];
}
}
eu criei esse componente app-star pra tentar colocar as estrelas de acordo com a classificação, o código ficou assim
import { Component, Input, OnChanges } from '@angular/core';
@Component({
selector: 'app-star',
templateUrl: './star.component.html',
styleUrls: ['./star.component.css'],
})
export class StarComponent implements OnChanges {
@Input()
rating: number = 0;
starWidth!: number;
constructor() {
this.starWidth = this.starWidth;
}
ngOnChanges(): void {
this.starWidth = (this.rating * 94) / 5;
}
}
<app-star [rating]="course - rating"></app-star>
???interface
ou umaclasse abstrata (melhor pq dá para ser instanciada)
, para não ter que ficar definindo valores nela, apenas sendo um modelo. Dito isto, não vi relação com o erro da pergunta e o código apresentado na mesma, a única coisa que me vem a cabeça é o problema estar em[rating]="course - rating"
qual tipo de dado que esse[rating]
aceita?