ng-template [NgForOf] return undefined value

Question

I have the next problem: construction

<p-dataTable [value]="listOfAddresses" [expandableRows]="true" [expandedRows]="listOfAddresses" ">
    <p-column>
        <ng-template let-item="rowData" let-i="rowIndex" pTemplate="body">
                {{i+1}}
        </ng-template>
    </p-column>
    <p-column >
         <ng-template ngFor let-item [ngForOf]="listOfOriginalAddresses" pTemplate="body">
             {{item.Street + " " + item.City}}   
         </ng-template>
    </p-column>
</p-table>

Returns undefined values for item.Street and item.City Strange because if I use

<p-column >
   <ng-template pTemplate="body">
      <div *ngFor="let item of listOfOriginalAddresses">
          {{item.Street + " " + item.City}}   
     </div>
   </ng-template>
</p-column>

I have all required values but all the list in the row. What is the problem? Thanks in advance

score 0 · Answer 1 · answered Dec 11 '17 at 08:15

0

Do use [Elvis operator][1], by having ? it will check if object defined

{{item?.Street + " " + item?.City}}

answered Dec 11 '17 at 08:15

santosh singh

27,666
26
83
129

result the same. Object in the row but values looks like 'undefined undefined' – Antatrix Dec 11 '17 at 08:20
@Antatrix try this let item of listOfOriginalAddresses|async – santosh singh Dec 11 '17 at 08:22
used in second variant
get error "InvalidPipeArgument: '[object Object],[object Object]"
– Antatrix Dec 11 '17 at 08:48
can you show us the console.log of listOfOriginalAddresses ? – Daniel Segura Pérez Dec 11 '17 at 08:52
make sure you have this statement inside your service code .map(res=>res.json()); – santosh singh Dec 11 '17 at 09:01
have you tried to put second *ngFor inside the ng-template pTemplate="body" ? – Luca Taccagni Dec 11 '17 at 09:01
@LucaTaccagni yes, but result the same. – Antatrix Dec 13 '17 at 07:56

score -1 · Accepted Answer · answered Dec 12 '17 at 08:07

Solved but not with using of ngFor.

I create pipe:

 transform(value: any): any {
        let item = value;
        return (item.Street + " " + item.Country);
    }

Furthermore, data don't change according to the edition in the fields with parced address, what solved another headacke.

ng-template [NgForOf] return undefined value

2 Answers2