angular - 如何在静态屏幕尺寸上动态更改Angular5中的fxFlex值？

我有以下两列，我想动态地交换/更改按钮的fxFlex值onClick。我知道，如果您调整屏幕大小，fxFlex.md/lg等将启动，我能够完成。但是我试图了解如何在某些事件(例如按钮单击)上更改静态屏幕大小上的fxFlex值。

<div flexLayout="row">
  <div fxFlex="fxFlexForCol1" style="background-color: green">
    <button mat-raised-button (click)="swapViewableArea()">Click to enlarge view {{fxFlexForCol1}}</button>
  </div>
  <div fxFlex="fxFlexForCol2" style="background-color: red">
      <button mat-raised-button (click)="swapViewableArea()">Click to enlarge view {{fxFlexForCol2}}</button>
    </div>

  swapViewableArea() {
    const temp = this.fxFlexForCol1;
    this.fxFlexForCol1 = this.fxFlexForCol2;
    this.fxFlexForCol2 = temp;
  }

在单击按钮时，我看到fxFlexForCol1和fxFlexForCol2值已交换，但flexLayout在UI布局中没有反射(reflect)相同的值

任何建议，请。

最佳答案

您需要将fxFlex绑定(bind)到您的媒体资源。

将fxFlex替换为[fxFlex] =“property”

关于angular - 如何在静态屏幕尺寸上动态更改Angular5中的fxFlex值？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49602576/