如何在静态屏幕尺寸上动态更改Angular5中的fxFlex值? [英] How to dynamically change fxFlex value in Angular5 on a static screen-size?

问题描述

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

I have two columns as below and I wanted to dynamically swap/change fxFlex value onClick of a button. I know that if you resize screen, fxFlex.md/lg etc will kick-in which I was able to accomplish. But am trying to understand how to change the fxFlex values on a static screen-size on some event like button-click.

<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布局中没有反映出相同的含义

On button-click I see that fxFlexForCol1 and fxFlexForCol2 values are swapped but flexLayout doesn't reflect the same in the UI-layout

任何建议.

推荐答案

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

You need to bind fxFlex to your property.

将fxFlex替换为[fxFlex] =属性"

Replaced fxFlex with [fxFlex]="property"

这篇关于如何在静态屏幕尺寸上动态更改Angular5中的fxFlex值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！