如何在静态屏幕尺寸上动态更改 Angular5 中的 fxFlex 值? [英] How to dynamically change fxFlex value in Angular5 on a static screen-size?
问题描述
我有如下两列,我想在单击按钮时动态交换/更改 fxFlex 值.我知道如果您调整屏幕大小,fxFlex.md/lg 等将启动我能够完成的工作.但我试图了解如何在按钮单击等事件中更改静态屏幕大小上的 fxFlex 值.
<div fxFlex="fxFlexForCol1" style="background-color: green"><button mat-raised-button (click)="swapViewableArea()">点击放大查看{{fxFlexForCol1}}</button><div fxFlex="fxFlexForCol2" style="background-color: red"><button mat-raised-button (click)="swapViewableArea()">点击放大查看{{fxFlexForCol2}}</button>
swapViewableArea() {const temp = this.fxFlexForCol1;this.fxFlexForCol1 = this.fxFlexForCol2;this.fxFlexForCol2 = 温度;}
单击按钮时,我看到 fxFlexForCol1 和 fxFlexForCol2 值交换了,但 flexLayout 在 UI 布局中没有反映相同
请提供任何建议.
您需要将 fxFlex 绑定到您的属性.
用 [fxFlex]="property" 替换 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;
}
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.
You need to bind fxFlex to your property.
Replaced fxFlex with [fxFlex]="property"
这篇关于如何在静态屏幕尺寸上动态更改 Angular5 中的 fxFlex 值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!