未捕获的类型错误：无法在 LayoutGapStyleBuilder.buildStyles 读取未定义的属性“endsWith”答案

【问题标题】：Uncaught TypeError: Cannot read property 'endsWith' of undefined at LayoutGapStyleBuilder.buildStyles未捕获的类型错误：无法在 LayoutGapStyleBuilder.buildStyles 读取未定义的属性“endsWith”
【发布时间】：2020-05-27 05:50:21
【问题描述】：

将我的 Angular 8 应用程序升级到 Angular 9 后，我在浏览器中收到一个模板的以下错误：

Uncaught TypeError: Cannot read property 'endsWith' of undefined
    at LayoutGapStyleBuilder.buildStyles (flex.js:233)
    at DefaultLayoutGapDirective.addStyles (core.js:492)
    at DefaultLayoutGapDirective.updateWithValue (flex.js:434)
    at MediaMarshaller.updateElement (core.js:3189)
    at SafeSubscriber._next (core.js:3294)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
    at SafeSubscriber.next (Subscriber.js:122)
    at Subscriber._next (Subscriber.js:72)
    at Subscriber.next (Subscriber.js:49)
    at MergeMapSubscriber.notifyNext (mergeMap.js:72)
    at InnerSubscriber._next (InnerSubscriber.js:11)
    at InnerSubscriber.next (Subscriber.js:49)
    at Subject.next (Subject.js:39)
    at MutationObserver.<anonymous> (flex.js:493)
    at ZoneDelegate.invoke (zone-evergreen.js:365)

【问题讨论】：

标签： angular typescript

【解决方案1】：

我使用以下方法遇到了同样的问题：

Angular 8.0.0
Flex-layout 8.0.0-beta.27

我的模板有以下顶级 div：

<div fxLayout="column" fxLayout.gt-xs="row wrap" fxLayoutAlign.gt-xs="start" fxLayoutGap.gt-xs="20px">

请注意，仅定义了 fxLayoutGap.gt-xs。

在 Chrome 上模拟移动屏幕（超小屏幕）时，然后尝试隐藏嵌套在我的顶级 div 下的 div（使用 *ngIf）会引发相同的错误。大于超小 (gt-xs) 的屏幕没有问题

我认为当为 fxLayoutGap 定义断点别名（例如 gt-xs）时会发生错误，但不是为默认值。在没有看到您的模板 html 的情况下，不确定这是否正是您的情况。

但是，在我的情况下，最简单的解决方法是将 fxLayoutGap="0px" 添加为 div 的默认值。这为我解决了 Cannot read property 'endsWith' of undefined 错误。

例如

<div fxLayout="column" fxLayoutGap="0px" fxLayout.gt-xs="row wrap" fxLayoutAlign.gt-xs="start" fxLayoutGap.gt-xs="20px">

【讨论】：

谢谢你，格伦）
我遇到了同样的错误，这解决了，谢谢

【解决方案2】：

要捕获未定义的布局间隙值，请实现一个自定义布局间隙构建器，它会转换未定义的间隙值，例如：

import { Injectable, NgModule } from '@angular/core';
import {
  StyleBuilder,
  StyleDefinition,
  LayoutGapParent,
  LayoutGapStyleBuilder,
} from '@angular/flex-layout';

@Injectable()
export class CustomLayoutGapStyleBuilder extends LayoutGapStyleBuilder {
  buildStyles(gapValue: string, parent: LayoutGapParent): StyleDefinition {
      return super.buildStyles(gapValue || '0 px', parent);
  }

  sideEffect(gapValue, _styles, parent) {
      return super.sideEffect(gapValue || '0 px', _styles, parent);
  }

}

并在@NgModule 中将其提供给您的应用程序：

@NgModule({
  //...
  providers: [
    //...
    { provide: LayoutGapStyleBuilder, useClass: CustomLayoutGapStyleBuilder },
  ],
})

【讨论】：

感谢您分享您的修复。这似乎应该由 flex 布局 imo 默认处理。