我正在通過閱讀一本書來學習 Angular，我遇到了一個任務，我必須使用引導程式來實作一個評級組件。當我編譯我的代碼時，評級組件沒有出現，我找不到錯誤......
rating.component.ts
@Component({
selector: "rating",
template:`<i
class="glyphicon"
[class.glyphicon-star-empty]="rating < 1"
[class.glyphicon-star]="rating >= 1"
(click)="onClick(1)"
>
</i>
`
})
export class RatingComponent{
rating = 0;
onClick(ratingValue:any){
this.rating = ratingValue;
}
}
app.component.ts
@Component({
selector: 'app-root',
template: `
<rating></rating>`,
})
export class AppComponent {
title = 'Angular Project';
}
索引.html
<html lang="en">
<head>
<meta charset="utf-8" />
<title>MyApp</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
crossorigin="anonymous"
/>
</head>
<body>
<app-root></app-root>
</body>
</html>
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { ProductsComponent } from './Components/product.component';
import { AppComponent } from './app.component';
import { AdvertisementComponent } from './Components/advertisement.component';
import { MaterialComponent } from './Components/material.component';
import { RatingComponent } from './Components/rating.component';
@NgModule({
declarations: [
AppComponent,ProductsComponent,AdvertisementComponent,MaterialComponent,RatingComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
uj5u.com熱心網友回復：
您正在嘗試在 Bootstrap5 中使用 glyphicon，它在 Bootstrap4 中已停止使用。
如果您真的想使用 glyphicon 并且使用舊版本的 Bootstrap 沒有問題，您可以使用 Bootstrap3 更改 index.html 檔案
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
/>
您的代碼僅顯示一顆星，您可以顯示 5 顆星，將模板更改為：
<span *ngFor="let number of [1, 2, 3, 4, 5]">
<i
class="glyphicon"
[class.glyphicon-star-empty]="rating < number"
[class.glyphicon-star]="rating >= number"
(click)="onClick(number)"
>
</i>
</span>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/512235.html