有没有 ？ （“安全运算符”）Typescript中的替代方法来处理空值？

Question

在我的Angular应用中，我试图使用ngIf显示/隐藏div。

下面是我的HTML：

<div *ngIf="damageReportToPolice()">
</div>

这是我的打字稿：

public damageReportToPolice(): boolean {      
 if(this.damageDetailsTwoForm['controls'].injuryTypeGp['controls'].injuryType.value.value === 'Burglary in the car') {
          return true;
        } else {
          return false;
        }
      }

当页面加载时，＆＆当条件为true时，div显示就可以了。

但是，当我reset()表单时，出现以下错误：

  

无法读取null的属性“值”

当我在HTML中有此条件时，可以像这样使用?作为安全运算符：

damageDetailsTwoForm['controls'].injuryTypeGp.controls.injuryType?.value?.value === 'Burglary in the car'

但是我似乎找不到替代它的打字稿。

有人可以告诉我是否可以使用安全操作员吗？或者如何解决这个问题？

非常感谢！

Answer 1

我认为您应该将模板代码更改为此

damageDetailsTwoForm.get('injuryType')?.value?

或更像这样的更清洁的方式

  <form (ngSubmit)="onSubmit(registerForm)" #registerForm="ngForm">
    <div class="form-group">
      <label for="UserName">Your email</label>
      <input
        type="text"
        ngModel
        class="form-control"
        id="UserName"
        name="UserName"
        required
      />
      <div
        *ngIf="
          registerForm.controls.UserName?.errors?.required &&
          registerForm.controls.UserName?.touched
        "
        class="alert alert-danger"
      >
        Email is required
      </div>
    </div>

要在打字稿中检查是否为空，您只能通过

进行检查

if(something) {
 // do something
}

Answer 2

出于好奇，它被命名为 elvis操作符（参考Kotlin），它也是javascript proposal，可能会在下一个ES规范中出现。如果您不想像

那样链接它，那么没有任何针对typescript / javascript的简短解决方案。

injuryType && injuryType.value && injuryType.value.value

然后，您可以创建一个在发生异常的情况下返回null的函数：

export function safeNavigation(cb) {
  try {
    return cb();
  } catch (error) {
    return null;
  }
};




// In the component...
if (safeNavigation(() => injuryType.value.value) === 'Burglary in the car') {
...

PS。如果不会引起冲突，我想将其重命名为_，并像_(() => path.to.navigate)一样使用它