如果未定義，則顯示空值

Question

我有角度組件從后端獲取值。

這是ts中的方法。

properties: PropertyDto[] = [];
    getProperties(event?: LazyLoadEvent): void {
        if (this.primengTableHelper.shouldResetPaging(event)) {
            this.paginator.changePage(0);
            return;
        }

        this.primengTableHelper.showLoadingIndicator();

        this._propertyService.getProperties(
            this.filterText,
                this.primengTableHelper.getSorting(this.dataTable),
                this.primengTableHelper.getMaxResultCount(this.paginator, event),
                this.primengTableHelper.getSkipCount(this.paginator, event)
        )
        .pipe(finalize(() => this.primengTableHelper.hideLoadingIndicator()))
        .subscribe(result => {
            this.primengTableHelper.totalRecordsCount = result.totalCount;
            this.primengTableHelper.records = result.items;
            this.primengTableHelper.hideLoadingIndicator();
        });
    }

結果中的某些值可以為null。

這是這些值的html部分

 <td>
    {{record.landlord.name}}
 </td>
 <td>
   {{record.agent.name}}
 </td>

我有錯誤

無法讀取未定義的屬性“名稱”

我如何只顯示空白字段並避免這些錯誤？

Answer 1

用? 為安全綁定，試試這個：

{{record?.landlord?.name}}

Answer 2

更好。 record? 也可能是record.landlord? 取決於您的數據源，即如果記錄不是，則可以定義房東。

<td>
    {{record? record.landlord.name :''}}
</td>

<ng-container *ngIf="record; else elseTemplate">
              <td>
                {{record.landlord.name}}
              </td>
            </ng-container>
            <ng-template #elseTemplate>
              <td>
                &nbsp;
              </td>
            </ng-template>

Answer 3

<td>
    {{record.landlord? record.landlord.name :''}}
</td>

檢查landlord的價值。 如果它是通過JavaScript的truthy ，使用它。 否則使用空字符串

Answer 4

如果沒有記錄，您可以使用ng ifs顯示不同的內容：

<div *ngIf="record">
    <h1 *ngIf="record.landlord">{{record.landlord.name}}</h1>
    <h1 *ngIf="record.agent">{{record.agent.name}}</h1>
</div>

你可以在這里找到更多的信息/文檔