這是mt TS檔案，其中_services.liveclasses_api()通過API Get指向service.ts。
this._services.liveclasses_api().subscribe((result)=>{
console.log(result);
this.liveclasses = result.data.classes;
})
這里的痛點是，從 API 中我們得到了 PHY、Chem 等主題，而我們必須列印成物理、化學等......
<p *ngIf="d.subject=='CHEM'" ><span>
<img src="/assets/images/chemistry.png" alt="我們可以在 Angular 中對 API 資料進行 if 檢查嗎？" />
</span>CHEMISTRY</p>
<p *ngIf="d.subject=='PHY'" ><span>
<img src="/assets/images/physics.png" alt="我們可以在 Angular 中對 API 資料進行 if 檢查嗎？" />
</span>Physics</p>
對所有其他科目也是如此。有沒有其他方法可以解決這個問題，我可以在那里列印主題名稱表單 API 主題代碼？在 Angular 模板上沒有 ngIF？
uj5u.com熱心網友回復：
根據您的問題，我了解到您的 API 正在為您提供諸如“PHY”、“CHEM”等值...
因此，您可以像這樣重構邏輯，而不是像這樣多次檢查：
// somewhere else in your project, you could have an `enum`
// for getting the values
//subject.utils.ts for example
export enum mySubjects = {
'CHEM': 'CHEMISTRY',
'PHY': 'PHYSICS'
....
}
// back in your component, you could handle it like this:
import { MySubjects } from '../subject.utils';
...
...
...
getSubjects(): Observable<YourTypeHere> {
return this._services.liveclasses_api().pipe(
map((response) => MySubjects[response.data.classes])
);
}
getImageSource(mySubject: string): string {
return `/assets/images/${mySubject.toLowerCase()}.png`
}
<ng-container *ngIf="(formatSubjects$ | async) as subject">
<p
class="sess-subject">
<span>
<img
[src]="getImageSource(subject)"
class="sesssub-icon"alt="" />
</span>{{ subject }}
</p>
</ng-container>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/385192.html