FlexboxLayout addChild 不是函数答案

【问题标题】：FlexboxLayout addChild is not a functionFlexboxLayout addChild 不是函数
【发布时间】：2019-07-23 17:49:15
【问题描述】：

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

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

但是最后一条命令行返回一个错误，指出 this.flex.addChild 方法不是函数。

【问题讨论】：

标签： angular typescript nativescript angular2-nativescript

【解决方案1】：

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

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

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

【讨论】：

嘿@Manoj 谢谢！我按照您的建议做了，调用了 ngAfterViewInit 方法并为 ElementRef 更改了 FlexboxLayout。因为要在 FlexBox 中添加，只需执行以下操作： let component: ==> FlexboxLayout = this.flex.nativeElement; component.addChild (stack);
让组件：FlexboxLayout = this.flex.nativeElement;
component.addChild (stack);