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();
        });
    }

result中的某些值可以为空。

此处是这些值的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>

您可以找到更多信息/ docs here

如果未定义，则显示空值

4 个答案: