Angular 在Ionic 2和Ionic 4中具有错误条件的回退映像

我有一个标签，上面有一个图像源。如果映像失败，我还编写了一个错误案例。下面是我的代码

<div class="column thumbnail"><img class="posterThumbNail" [src]="item.imageUrl" onError="this.src='./assets/imgs/placeholder.png';" /></div>

我是否可以在此onError中设置一个条件，以便根据缩略图类别显示与该类别相关的不同占位符图像。期待着像

<div class="column thumbnail"><img class="posterThumbNail" [src]="item.imageUrl" onError="errorPlaceHolder" /></div>

<ng-template #errorPlaceHolder>
 <div [ngSwitch]="item.category">
    <template [ngSwitchCase]="foo">
        <div>./assets/imgs/placeholderFoo.png</div>
    </template>
    <template [ngSwitchCase]="bar">
        <div>./assets/imgs/placeholderBar.png</div>
    </template>
    <template [ngSwitchCase]="cat">
        <div>./assets/imgs/placeholderCat.png</div>
    </template>¯
    <template [ngSwitchCase]="dog">
        <div>./assets/imgs/placeholderDog.png</div>
    </template>
</div>
</ng-template>

./assets/imgs/placeholder foo.png
./assets/imgs/placeholderBar.png
./assets/imgs/placeholder cat.png
¯
./assets/imgs/placeholder.png

---

我知道上面的代码在语法上是不正确的。我正在寻找与上述代码片段相匹配的解决方案。谢谢。

您可以使用设置错误路径的ts端变量

errorPaths:string[]=[];

//set the path wherever you receive item
switch(item.category){
  //set the path for each case in loop

}

在html文件中

 <div ngFor="let item of items;let i=index">
    <div class="column thumbnail"><img class="posterThumbNail" [src]="item.imageUrl" [onError]="errorPaths[i]" /></div>
</div>

您应该使用（错误）事件来处理错误，并根据需要使用对象来显示回退图像

HTML:

---

您还可以反转逻辑并仅在加载主图像时替换占位符。这可以通过ngif和（加载）完成。另外，将逻辑放在类中而不是放在模板中如何？更容易调试？ 它可以在附加阵列的帮助下完成，以跟踪加载的图像。此阵列可以与原始阵列合并，具体取决于如何获取和管理它

类别：

loaded = [false, false, false]; // should have items length
...
getReplacementImage(category) {
switch (category) {
  case "dog":
    return "dogImage";
  case "cat":
    return "catImage"
  default:
    return "placeholderImage"
}

<... *ngFor="let item of items; let i = index">

    <img [class.image-error]="!loaded[i]" ... [src]="item.image" (load)='loaded[i]=true'>

    <img *ngIf="!loaded[i]" ... [src]="getReplacementImage(item.category)">

</...>

.image-error {
  display:none; // to hide the placeholder image
}

Html:

loaded = [false, false, false]; // should have items length
...
getReplacementImage(category) {
switch (category) {
  case "dog":
    return "dogImage";
  case "cat":
    return "catImage"
  default:
    return "placeholderImage"
}

<... *ngFor="let item of items; let i = index">

    <img [class.image-error]="!loaded[i]" ... [src]="item.image" (load)='loaded[i]=true'>

    <img *ngIf="!loaded[i]" ... [src]="getReplacementImage(item.category)">

</...>

.image-error {
  display:none; // to hide the placeholder image
}

---

但就我而言，我无法确定加载项目时是否存在错误。如果图像源失败，那么需要放置占位符图像，我希望有合适的占位符图像匹配我的业务逻辑。此外，它是放置在ngFor中的列表项。谢谢。好的，我使用ngFor循环编辑解决方案，只需将“错误”标志附加到项目对象。对不起，我不明白你为什么说你不能确定是否有错误，这是（错误）事件为你做的。。。。我误解了吗？你是对的。我的意思是，我无法捕获TypeScript代码中的错误，因为它是在html中绑定的。正如我所说，我发布的代码在语法上是不正确的。在您提供的代码中，如果（item.error=true），那么如何将回退映像路径映射到img src。我刚刚在ng模板中的ngSwitch中放置了一个div，但它不起作用。很抱歉，我没有阅读您的switch语句，现在我更好地理解了。我已经编辑了我的答案，希望能有所帮助！但是“item”不是属性错误，我们不会在任何地方更改属性的值。它不起作用。我的是ngFor中的一个列表项。如果任何具有“src”的操作失败，则需要显示相应的占位符图像。我的箱子里有ts侧开关箱吗？你可以。但您必须有一个errorPath数组，或者在项目中有一个errorPath属性（如果可能），并设置它们我可以有一个errorPath数组。但我不清楚如何在运行时和出错时将开关用例映射为'src'。这是一种很棒的方法。但是在我的例子中，这个列表已经建立起来了，它包含了更多的项目。形象是一个部分，我不能用你提出的方式来处理。这对我很有用。谢谢我需要做的一个改变是，我可以使用类似“class.error”的东西隐藏第一个错误。我不能这样使用css。它正在扭曲我的用户界面。谢谢，谢谢你的解决方案。我也用了“ngStyle”。非常感谢您的快速解决方案。