显示数据表的图标，该值是数据库中的整数

Question

美好的一天！我很难在视图中显示一个图标，该值是一个整数。我想从数据库中检索数据作为图标

所以在我的模态中是一个评级图标列表，如果我选择第一个图标，它将在我的数据库中保存为整数或值为“1”，如果我选择第二个图标，它将保存为“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。

在您的组件中，您将Enum定义如下：

 eIconType= EIconType;

通过这样定义，您可以在HTML中使用它

在HTML中，您使用*ngIf或*ngSwitchCase，具体取决于默认图标。因此，假设您有一个默认图标，但没有选中，您应该使用*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：问我有什么不清楚的地方。