Angular "let-col" is not passing all the properties

Question

I'm trying to pass extra fields to help with the processing. This how I define the columns array:

this.columns = [
        {field: 'vin', header: 'Vin', isMultiRowColumn: true },
        {field: 'year', header: 'Year', isMultiRowColumn: false},
        {field: 'brand', header: 'Brand', isMultiRowColumn: false},
        {field: 'color', header: 'Color', isMultiRowColumn: false}
    ];

Now, when I run the below code:

<p-dataTable [value]="testData">
  <p-column *ngFor="let col of columns" [field]="col.field" [header]="col.header">
    <ng-template let-col let-dt="rowData" pTemplate="body">
     <span>{{dt[col.field] + '-' + col.isMultiRowColumn }}</span>
    </ng-template>
  </p-column>
</p-dataTable>

I'm getting this:

dsad231ff-undefined 2012-undefined  VW-undefined    Orange-undefined

Is there any reason isMultiRowColumn is not being passed?

Thanks for helping

@EhsanKiani it was hidden when I pasted the code her. I fixed it. Thanks — Richard77, May 04 '19 at 05:58
@FatemeFazli. It worked. Now I'd like to understand. Is `let-col` different from `let col of..`? I'm a little confused about what can be defined in the `let-`. — Richard77, May 04 '19 at 06:07
With let-col the context property $implicit is made available as col within the template for bindings. and you chose the col var in ngfor same as let-col, so try to change your col var name like: ```*ngFor="let column of columns"``` and it will work. — Fateme Fazli, May 04 '19 at 06:18
when you define let-col it makes a new var that references the table col that has a field property and it doesn't references your col variable that is defined in ngFor, it has field property but not isMultiRowColumn property, so try to change your ngfor variable from col to something else like column. — Fateme Fazli, May 04 '19 at 06:21
Your array is `this.cols` but you are iterating in template `*ngFor="let col of columns"` shouldn't it be `*ngFor="let col of cols"` — Sourav Dutta, May 04 '19 at 06:23

Fateme Fazli · Accepted Answer · 2019-05-04T06:56:13.667

With let-col the context property $implicit is made available as col within the template for bindings. and you chose the col var in ngfor same as let-col,when you define let-col it makes a new var that references the table col that has a field property and it doesn't references your col variable that is defined in ngFor, it has field property but not isMultiRowColumn property, so try to change your ngfor variable from col to something else like column:

also check: What is let-* in Angular 2 templates?

<p-dataTable [value]="testData">
  <p-column *ngFor="let column of columns" [field]="column.field" [header]="column.header">
    <ng-template let-col let-dt="rowData" pTemplate="body">
     <span>{{dt[column.field] + '-' + column.isMultiRowColumn }}</span>
    </ng-template>
  </p-column>
</p-dataTable>

see DEMO and click button and check the log in your browser to see what the col really is.

Angular "let-col" is not passing all the properties

1 Answers1