Question

我想在payment.invoice.reference不为空时显示invoice。

我尝试过这个：

<tr *ngFor="let payment of payments; index as i">
  <td>
    <span *ngIf="payment.invoice">{{payment.invoice.reference}}</span>
    <span *ngIf="!payment.invoice">Notinh</span>
  </td>
</tr>

我尝试过这个：

<tr *ngFor="let payment of payments; index as i">
  <td>{{payment?.invoice.reference}}</td>
</tr>

但这是行不通的。

有什么想法吗？

Answer 1

您已经在付款了吗？，这与您需要在发票后添加的内容相同。它被称为安全导航操作员，

 <td>{{payment?.invoice?.reference}}</td>

或者，您也可以使用 * {ngIf 指令

Answer 2

根据您的代码，您不是在处理可观察对象，因此我认为它是一种接口数组或数组。我真的不明白您所提供的信息如何构成您的数据，但是我会给您一个思路，您应该如何处理* ngIf及其认为有效的内容（此处不处理Observables，Subject和其他rxjs东西）：经过测试和工作。这仅显示参考4（因为所有其余发票对于* ngIf均无效）。这是一个展示，因此您应该根据您的数据源调整代码。 您的“ payments.component.ts”：

export class PaymentsListComponent {
  payments : Array<Payments> = new Array<Payments>();  
  constructor() {
    this.payments.push(new Payments(null , 1)); 
    this.payments.push(new Payments(undefined, 2)); 
    this.payments.push(new Payments (NaN,3)) ; 
    this.payments.push(new Payments("I am a real invoice", 4 ));
  }

}


export class Payments { 
  constructor(inv, ref) {
    this.invoice = inv ; 
    this.reference = ref; 
  }
  invoice  ; 
  reference ; 
}

您的“ payments.component.html”：

<tr *ngFor="let payment of payments">
  <td>
    <span *ngIf="payment.invoice">{{payment.reference}}</span>

  </td>
</tr>

正如我所说，这只会输出第四张发票（不是：Null，NaN或未定义）。希望这可以帮助。

在ngFor中测试null

2 个答案: