无法使用 ng-container Angular 9 Flex 布局读取未定义 fxFlex 问题的属性“setProperty”答案

【问题标题】：Cannot read property 'setProperty' of undefined fxFlex issue with ng-container Angular 9 Flex Layout无法使用 ng-container Angular 9 Flex 布局读取未定义 fxFlex 问题的属性“setProperty”
【发布时间】：2020-04-30 12:12:38
【问题描述】：

<div [fxLayout]="fields.layoutConfig.layoutDirection + ' wrap'" fxLayout.xs="column"
    [fxLayoutGap]="fields.layoutConfig.fxLayoutGap">

    <ng-container [fxFlex]="50" *ngFor="let field of fields.componentConfig;" reactiveField [field]="field" [group]="form">
    </ng-container>

</div>

尝试使用容器内的 [fxFlex]="50" 得到错误 Cannot read property 'setProperty' of undefined

一些问题https://github.com/angular/flex-layout/issues/1046 https://github.com/angular/flex-layout/issues/381

【问题讨论】：

标签： javascript angular typescript angular-material angular-flex-layout

【解决方案1】：

您不应该对fxLayout 和fxLayoutGap 使用属性绑定。

【讨论】：

我必须使用属性绑定，因为 fxLayout 和 fxLayoutGap 是动态值，它们不是静态的，fxFlex 也是动态值但要问我把它作为静态值的问题
参考-stackoverflow.com/questions/49602576/…

【解决方案2】：

在容器里面绑定

<div [fxLayout]="fields.layoutConfig.fxLayout + ' wrap'" fxLayout.xs="column"
    [fxLayoutGap]="fields.layoutConfig.fxLayoutGap"
    [fxLayoutAlign]="fields.layoutConfig.fxLayoutAlignHorizontal + ' ' + fields.layoutConfig.fxLayoutAlignVertical">
    <div [fxFlex]="fields.layoutConfig.fxFlex" *ngFor="let field of fields.componentConfig;">
        <ng-container reactiveField [field]="field" [group]="form"></ng-container>
    </div>
</div>

【讨论】：