FlexboxLayout addChild 不是函数

Question

我需要为通过 REST API 下载的数据安装可视化，但在使用 typescript 进行动态制作时出错。数据正确地来自服务器。

<FlexboxLayout
    flexWrap="wrap"
    #flex
>
</FlexboxLayout>

在打字稿上：

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 );
}

但是最后一个命令行 returns 一个错误说 this.flex.addChild 方法不是函数。

Answer 1

如果我没记错的话，您可能只能将 Angular 组件作为类型分配给用 ViewChild 注释的变量。所以你不能将 flex 读作 FlexboxLayout，而是 ElementRef.

@ViewChild('flex',{static: false}) flex: ElementRef;

此外 ngOnInit 可能有点太早了，请尝试布局本身的 ngAfterViewInit 或 loaded 事件。

FlexboxLayout addChild 不是函数

FlexboxLayout addChild is not a function

angular

typescript

nativescript

angular2-nativescript