javascript - 绑定(bind) Angular 5中的三元运算符

我有一个问题，我似乎无法弄清楚，基本上我正在尝试在angular。的[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。

但是我一直在控制台中收到这些大错误，这些错误实际上并不意味着什么吗？

任何帮助，将不胜感激

谢谢

编辑

我改变了运算符(operator)的位置，现在我收到了这个错误，它说我在第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" >

最佳答案

以下语法应该起作用。由于备用URL是文字字符串，所以用单引号引起来。在第一种语法中，两个NOT运算符!!清楚地表明它在条件中被视为 bool(boolean) 值。

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