Monday, 10 May 2021

Angular ngFor Loop Over Object and build issue

 https://angular.io/api/common/KeyValuePipe


@Component({ selector: 'keyvalue-pipe', template: `<span> <p>Object</p> <div *ngFor="let item of object | keyvalue"> {{item.key}}:{{item.value}} </div> <p>Map</p> <div *ngFor="let item of map | keyvalue"> {{item.key}}:{{item.value}} </div> </span>` }) export class KeyValuePipeComponent { object: {[key: number]: string} = {2: 'foo', 1: 'bar'}; map = new Map([[2, 'foo'], [1, 'bar']]); }

Issue with key value pipe is thaat it wont complie with --aot or build for production unless ts.config.json's fullTemplateTypeCheck is changed to false

"fullTemplateTypeCheck": false, 
https://stackoverflow.com/questions/61264242/angular-9-keyvalues-pipe-doesnt-build-for-production


Another work around without changing ts.config.json

is that create a key array

pulic keyArray = Object.keys(MyObject)

Then loop over keys

<ng-container *ngFor="let key of keyArray">

{{myObject[key}}

</ng-container>




No comments:

Post a Comment