I am trying to convert the following to work, but I think it is an Es5/ES6 issue. Help Appreciated.
this.rows = Array.from(Array(Math.ceil(this.subCategoryModels.length / 3)).keys());
I currently get typscript errors:
[ts]
Property 'from' does not exist on type 'ArrayConstructor'.
any
and
[ts]
Property 'keys' does not exist on type 'any[]'.
any
Property 'from' does not exist on type 'ArrayConstructor'.
This points to the fact that you want to use ES6 type definitions while still compiling to ES5.
Recommend the lib option in TypeScript latest:
"compilerOptions": {
"target": "es5",
"lib": ["es6", "dom"]
}
https://basarat.gitbooks.io/typescript/content/docs/types/lib.d.ts.html#lib-option
Since you're seeing these errors, I'm assuming you're compiling to ES5. You can use typings to make Typescript recognize the es2015 functions for arrays.
First, install typings if not already installed.
npm install typings --global
Once you've installed typings, install type type definitions for ES2015 array functions.
typings install -SG env~es2015-array
If you're targeting a browser that does not support the new Array functions, you'll also need to add a polyfill.
I ended up doing the following:
html
<ion-row *ngFor="let trio of getTriples()">
<ion-col *ngFor="let item of trio" (click)="itemTapped(item)">
<div class="row responsive-md">
<div id="icon-image-{{item.id}}"><img src="data:image/png;base64,{{item.icon}}" height="75" width="75" /></div>
<p>{{item.name}}</p>
</div>
</ion-col>
</ion-row>
typescript
getTriples() {
let triples = [];
let length = this.subCategoryModels.length;
for (let i = 0; i < length; i += 3) {
let trio = [];
trio.push(this.subCategoryModels[i]);
if (i + 1 < length) {
trio.push(this.subCategoryModels[i + 1]);
}
if (i + 2 < length) {
trio.push(this.subCategoryModels[i + 2]);
}
triples.push(trio);
}
return triples;
}
Array.from()and.keys()are ES6 methods, so obviously they won't work in ES5.this.rows = Array.from(new Array(Math.ceil(this.subCategoryModels.length / 3)).keys());for (var index = 0; index < Math.ceil(this.subCategoryModels.length / 3); index++) { this.rows.push(index); }