Question

我有两列如下所示，我想在点击一个按钮时动态交换/更改fxFlex值。我知道如果你调整屏幕大小，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布局中没有反映出来

请提出任何建议。

Answer 1

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

将fxFlex替换为[fxFlex] =“属性”

Answer 2

想通了！只需使用大括号！

<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>
</div>

如何在静态屏幕大小上动态更改Angular5中的fxFlex值？

2 个答案: