データベースから値が整数であるアイコンをデータテーブルに表示

Question

おはよう！私は、値が整数である私のビューにアイコンを表示するのは苦労している。私は

私のモーダルでそう

が評価アイコンのリストであるアイコンとしてデータベースからデータを取得したいと私は最初のアイコンを選択した場合、それは整数としてかの値として、私のデータベースに保存されます"1"と2番目のアイコンを選択すると "2"と保存されます。

それでは、私がやりたいことは、私のデータテーブルに

を選択したアイコンを表示するには、このアイコンは

<table datatable [dtTrigger]="dtTrigger" class="row-border hover"> 
    <thead> 
     <tr> 
      <th>Question</th> 
      <th>Rating Icon</th> 
      <th>Action</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let x of question"> 
      <td>{{x.text}}</td> 
      <td> 
       <!-- {{x.rating_icon}}         --> 
      </td> 
      <td> 
       <i class="fa fa-pencil" style="font-size: 20px; cursor:pointer;color:#2386bf; " (click)="editModal(x.id)"></i>&nbsp; 
       <i class="fa fa-remove" style="font-size: 20px; cursor:pointer;color:#e43a3a; " (click)="archiveQuestion(x.id)"></i> 
      </td> 
     </tr> 
    </tbody> 
</table> 

を表示する必要が私のデータテーブル内の私のコード、です

私は誰かがこれを手伝ってくれることを願っています。ありがとうございます。

Answer 1

*ngIfまたは*ngSwitchCaseを使用するのは、あなたのケースのアイコンに表示される唯一の方法です。

あなたのEnum EIconTypeを呼び出すことができます。このようにそれを定義することにより

eIconType= EIconType; 

をあなたはデフォルトのアイコンに応じて、*ngIfか*ngSwitchCaseを使用してHTMLにあなたのHTMLに

をそれを使用することができます：あなたは次のようにあなたの列挙型を定義し、あなたのコンポーネントで

。だから、デフォルトのアイコンがあり、選択されていないアイコンが*ngSwitchCaseの場合は、*ngIfを使用してください。

HTML：

<!-- ngIf --> 
<div *ngIf="eIconType.Star"> 
    <img src="yourPath/StartIcon"> 
</div> 
<div *ngIf="eIconType.Thumb"> 
    <img src="yourPath/ThumbIcon"> 
</div> 
... 


<!-- ngSwitchCase --> 
<div [ngSwitch]="yourObjectAttributeEnumValue"> 
<div *ngSwitchCase="eIconType.Star"> 
    <img src="yourPath/StartIcon"> 
</div> 
<div *ngSwitchCase="eIconType.Thumb"> 
    <img src="yourPath/ThumbIcon"> 
</div> 
... 
<div *ngSwitchDefault> 
    <img src="yourPath/DefaultRatingIcon"> 
</div> 

私は、これはあなたを助けることができると思います。

Ps：不明な点がある場合はお問い合わせください。