Angular7组件视图在数据操作上崩溃

Question

我遇到了最奇怪的问题。我确实有一个组件的样式由它正在处理的某个对象控制。随着对象被操纵（通过一些内部组件点击），整个视图折叠到高度为 0。

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

对象

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()。 所以我也这样做了，并在最外面的组件上声明了 valuemap（使用组件 a 和 b 的那个）

我重新创建了你的 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 时，样式被解释为一个对象。意思是，在您的情况下，您需要删除 ' arround valueMap.width 并将它们添加到宽度。

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

希望能有所帮助。

问候

艾伦