如果图像src使用404错误解析,则使用Angular隐藏div

Question

我有这段代码.它是蒸汽游戏的标志

<div class="col-md-3">
        <img src="http://cdn.edgecast.steamstatic.com/steam/apps/{{game.steamID}}/header.jpg" style="width: 100%; height: auto;"/>
    </div>

这是与ngFor循环绑定的缩略图div的一部分.

现在在某些情况下,我的问题.

我的应用程序使用steam WebAPI获取用户拥有的所有游戏的列表,并将其存储在数据库中.

然后它会向用户显示这些游戏的列表,并带有游戏徽标.

有一些"游戏"实际上不是游戏,主要是专用服务器.但是这些非游戏没有附加任何图像.我想在网页出现时从网页中删除这些条目.我能想到的最好的方法是捕获任何404错误并告诉缩略图隐藏自己.

所以我的问题是,如果图像网址出现404错误,是否可以使用ngIf隐藏div？

编辑

我正在为可能想要了解大局的任何人添加整个缩略图的代码.

<div class="thumbnail" style="color: black" *ngFor="let game of games">
<div class="row">
    <div class="col-md-3">
        <img src="http://cdn.edgecast.steamstatic.com/steam/apps/{{game.steamID}}/header.jpg" style="width: 100%; height: auto;"/>
    </div>
    <div class="col-md-9">
        <div class="row">
            <div class="col-md-12">
                <h2>{{game.name}}</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <!--<p>{{countRequests(game.id)}} People want to play<span class="pull-right">Sinse: GET_LAST_REQUEST_DATE</span></p>-->
            </div>
        </div>
    </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
    <div class="centerBlock">
        <div class="btn-group btn-group-lg btn-block">
                        <button *ngIf="page > 1" class="btn btn-primary btn-outline" (click)="previousPage()">Previous</button>
            <button *ngFor="let page of pages" class="btn btn-primary btn-outline"(click)="gotoPage(page)">{{page}}</button>
            <button *ngIf="page < maxPages" class="btn btn-primary btn-outline" (click)="nextPage()">Next</button>
        </div>
    </div>
</div>
</div>

Answer 1

使用Angular事件,您可以隐藏图像本身:

<img #image src="..." (error)="image.hidden = true" [hidden]="image.hidden">

或任何其他元素:

<div [hidden]="image.hidden"></div>

或者完全删除任何div:

<div *ngIf="!image.hidden"></div>