问题
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;
}
On button-click I see that fxFlexForCol1 and fxFlexForCol2 values are swapped but flexLayout doesn't reflect the same in the UI-layout
Any advise please.
回答1:
You need to bind fxFlex to your property.
Replaced fxFlex with [fxFlex]=“property”
回答2:
Figured it! Just use curly brace!
<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>
来源:https://stackoverflow.com/questions/49602576/how-to-dynamically-change-fxflex-value-in-angular5-on-a-static-screen-size