HTML 模板中空值合并运算符的 Angular 等效项答案

【问题标题】：Angular Equivalent of Null Coalescing Operator in HTML TemplateHTML 模板中空值合并运算符的 Angular 等效项
【发布时间】：2021-06-03 11:44:30
【问题描述】：

空合并运算符的等价物是什么？在 Angular HTML 模板中？是 OR 运算符吗？

目标：如果 Product Name 为 null，则显示 ProductType

{{ (item?.ProductName || item.ProductType) }}

使用 ?? HTML 模板中的运算符，给我一个错误。

【问题讨论】：

标签： angular typescript angular11

【解决方案1】：

我想我有一个解决方案，请检查下面的代码=>
HTML：

<p>
 {{ item?.ProductName==undefined?item.ProductType:item.ProductName }}
</p>

TS：

import { Component} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  item:MyClass;
  constructor(){
    this.item=new MyClass();
    //this.item.ProductName="P-Name";
    this.item.ProductType="P-Type";
    console.log(this.item.ProductName);
  }
}
export class MyClass{
  ProductName :string;
  ProductType :string;
}

注意：如果启用this.item.ProductName="P-Name"; 这一行，它将显示“P-Name”，否则将显示“P-Type”。 StackBlitz Link.

【讨论】：