在ngFor循環中檢查空值

Question

我正在網頁上的按鈕中顯示信息。 這些按鈕顯示列表中的幾個對象及其字段（例如object.name，object.age等）。 在某些情況下，這些字段之一為空。 如何檢查值是否為空？ 如果為空，我想打印“未知”-到目前為止，它什么都不打印。

這是我的ngFor循環（在我的情況下，環境有時為null）：

<button *ngFor="let object of objects; let i = index" type="button" style="text-align:left; margin-right: 10px; margin-bottom: 10px" class="btn btn-primary"
        Name: {{object.name}} <br /> Locations: {{object.date}} <br /> Environments: {{object.environment}}
</button>

我知道我可以將環境手動設置為“未知”，因為它是一個字符串值，但是我想知道是否可以通過html來實現。

Answer 1

這是您的管道的外觀：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'unknown'})
export class Unknown implements PipeTransform {
  transform(value: any): any {
    return value ? value : 'Unknown'
  }
}

在組件內部，您需要包括管道：

@Component({
...
pipes: [Unknown] // this is whatever you named your exported class

然后在你的HTML中

...
<br /> Environments: {{object.environment | unknown}} //this is whatever name you put in the @Pipe decorator

我個人比較喜歡管道，因為它可以使HTML更清晰易讀，並且可以充分利用您在其中進行編碼的框架

Answer 2

管道是一個很好的解決方案，但是如果您願意，可以直接在html中使用* ngIf：

<button *ngFor="let object of objects; let i = index" type="button" style="text-align:left; margin-right: 10px; margin-bottom: 10px" class="btn btn-primary"
    Name: <span *ngIf="object.name">{{object.name}}</span> <span *ngIf="!object.name">Unknown</span>