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

Question

我有一个问题，我似乎无法弄清楚，基本上我试图在 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..

但我在控制台中不断收到这些没有任何意义的大量错误？

任何帮助将不胜感激

谢谢

编辑

我切换了运算符，现在我收到了这个错误，它说我在第 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 运算符 !! 清楚地表明它在条件中将值视为 bool 值。

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