I have angular ponent that get values from back end.

Here is the method in 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();
        });
    }

Some of values in result can be null.

Here is html part for those values

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

I have errors like

Cannot read property 'name' of undefined

How I can show just blank field and avoid those errors?

I have angular ponent that get values from back end.

Here is the method in 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();
        });
    }

Some of values in result can be null.

Here is html part for those values

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

I have errors like

Cannot read property 'name' of undefined

How I can show just blank field and avoid those errors?

• javascript
• angular
• typescript

• 1 Try {{record?.landlord?.name}} (question marks) – porgo Commented Apr 11, 2019 at 12:24
• Possible duplicate of Error if don't check if {{object.field}} exists – Liam Commented Apr 11, 2019 at 12:43

4 Answers 4

Use ? for safe binding, try this:

{{record?.landlord?.name}}

Better. record? could also be record.landlord? depending on your datasource, i.e. can landlord be undefined if record isn't.

<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>

You could use ng ifs to show something different if there is no record for example:

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

you can find more information/docs here

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

Checks the value of landlord. If it is truthy by the means of JavaScript, use it. Otherwise use empty string