javascript - Angular7 组件 View 在数据操作时崩溃

Question

我遇到了最奇怪的问题。我确实有一个组件，其样式由它正在处理的某个对象控制。当对象被操作时(通过一些内部组件点击)，整个 View 折叠到 0 的高度。

我尝试通过 ngStyle、ngClass、普通 ol'javascript 应用 View 更改 - 但没有任何效果。第二件奇怪的事情 - 处理外部组件的组件样式非常有效。

对象

const valueMap = {
  width: '100%',
  ...
}

伪组件树

<component-a>
  <component-b [ngStyle]="{'width': valueMap.width} [valueMap]="valueMap">
    <div (click)="changePosition()">Button</div>
  </component-b>
</component-a>

方法

changePosition() {
  this.valueMap.width = this.valueMap.width==='100%' ? '50%' : '100%';
}

我真的希望组件 b 折叠到 50% 的宽度，但不会将高度折叠为零。我可以在代码中看到，当我单击按钮时，样式将应用于元素 - 如果在 Chrome DevTools 中停用应用的样式并再次激活它，它会正确显示。从来没有过这样的事情。有人可以帮忙吗？

提前致谢。安德烈

Answer 1

我试图重现您的问题。虽然我无法得到你似乎遇到的错误，但我想我可以看到手头的问题:

来自您的 html

<component-a>
  <component-b [ngStyle]="{width: 'valueMap.width'} [valueMap]="valueMap">
    <div (click)="changePosition()">Button</div>
  </component-b>
</component-a>

我可以知道，您的“valueMap”是组件 b 中的一个 Input()。所以我也这样做了，并在最外面的组件(使用组件 a 和 b 的组件)上声明了 valuemap

我重新创建了您的 html 并发现了解析错误等等，直到我意识到了一些事情:

  <app-collapse-on-click>
    <app-collapse-child [ngStyle]="{'width': valueMap.width, 'background-color': 'rebeccapurple'}" [valueMap]="valueMap">
      <div><button (click)="changePosition()">Button</button></div>
    </app-collapse-child>
  </app-collapse-on-click>

当使用 ngStyle 时，样式被解释为一个对象。这意味着，在您的情况下，您需要删除 ' around valueMap.width 并将它们添加到宽度。

我添加了背景颜色以获得视觉结果，而不仅仅是样式 html。

希望能有所帮助。

问候

艾伦