我们可以对Angular中的API数据进行if检查吗

Question

这是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，化学等。我们必须打印为物理，化学等…

<p 
*ngIf="d.subject == 'CHEM'" 
class="sess-subject">
<span>
<img src="/assets/images/chemistry.png" class="sesssub-icon"alt="" />
</span>CHEMISTRY
</p>
<p 
*ngIf="d.subject == 'PHY'" 
class="sess-subject">
<span>
<img src="/assets/images/physics.png" class="sesssub-icon"alt="" />
</span>Physics
</p>

同样适用于所有其他受试者。有没有其他方法，我可以从API主题代码打印主题名称？Angular模板上没有ngIf？

Answer 1

根据您的问题，我理解您的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>