绑定角度的三元运算符5

Question

我有一个问题，我似乎无法弄明白，基本上我试图在角度的[src]属性中使用三元if语句

<img class="author-head" [src]="(asset.fields.authorHeadImage != null || asset.fields.authorHeadImage != undefined ) ? asset.fields.authorHeadImage?.fields?.file.url : ../../../../assets/Images/CustomContent/author.jpg" >

基本上我想在这里做的是，如果asset.fields.authorHeadImage为null或asset.fields.authorHeadImage未定义显示此预定图像，但如果有一个authorHeadImage然后使用该图像src ..

但我一直在我的控制台中得到这些大错误，这并不是什么意思？

任何帮助，将不胜感激

谢谢

编辑

我改变了操作员，现在我得到了这个错误，它说我在第136列有一个意想不到的满员，但是没有流氓的全停？

Parser Error: Unexpected token . at column 136 in [(asset.fields.authorHeadImage != null || asset.fields.authorHeadImage != undefined) ? asset.fields.authorHeadImage?.fields?.file.url : ../../../../assets/Images/CustomContent/drsultan.jpg] in ng:///MainModule/ProgramItemComponent.html@5:37 ("
      <div *ngIf="asset.fields.showAuthorHead === true">
        <img class="author-head" [ERROR ->][src]="(asset.fields.authorHeadImage != null || asset.fields.authorHeadImage != undefined) ? asset.fi"): ng:///MainModule/ProgramItemComponent.html@5:37
Parser Error: Unexpected token . at column 136 in [(asset.fields.authorHeadImage != null || asset.fields.authorHeadImage != undefined) ? asset.fields.authorHeadImage?.fields?.file.url : ../../../../assets/Images/CustomContent/drsultan.jpg] in ng:///MainModule/ProgramItemComponent.html@5:37 ("ile.url : ../../../../assets/Images/CustomContent/drsultan.jpg" >

Answer 1

以下语法应该有效。备用URL由单引号括起，因为它是文字字符串。两个NOT运算符!!清楚地表明它在条件中被视为布尔值的值。

<img [src]="!!asset.fields.authorHeadImage ? asset.fields.authorHeadImage : '../../../../assets/Images/CustomContent/author.jpg'" ... >

Answer 2

没有经过测试，但这样的事情应该是一种方法。保持你的HTML清洁。

 <img class="author-head" [src]="asset.fields.authorHeadImage != null  ? asset.fields.authorHeadImage : myImgUrl" >

.ts文件

export class App{
   myImgUrl: string='../../../../assets/Images/CustomContent/author.jpg';
}