I'm struggling with mounting a visualization for data pulled from a REST API using TypeScript. I keep encountering errors when trying to dynamically create the layout, even though the data is being retrieved correctly from the server.
<FlexboxLayout
flexWrap="wrap"
#flex
>
</FlexboxLayout>
Here's the TypeScript code:
import { FlexboxLayout } from 'tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout';
import { StackLayout } from 'tns-core-modules/ui/layouts/stack-layout';
import { Image } from 'tns-core-modules/ui/image';
import { Label } from 'tns-core-modules/ui/label';
// ...
@ViewChild('flex',{static: false}) flex: FlexboxLayout;
ngOnInit() {
// Populate the categories variable with server data
categories.forEach((cat) => {
this.createCategView(cat);
});
}
createCategView(c: Category) {
let stack = new StackLayout();
let img = new Image();
img.src = c.image;
img.stretch = "none";
img.width = 25;
img.height = 25;
let label = new Label();
label.text = c.name;
stack.addChild(img);
stack.addChild(label);
this.flex.addChild( stack );
}
Unfortunately, the last line of code this.flex.addChild is throwing an error and saying that it is not a function.