Угловой материал fxlayoutgap дает непоследовательный вывод (иногда не работает) - PullRequest
Новая
       16

Угловой материал fxlayoutgap дает непоследовательный вывод (иногда не работает)

0 голосов
/ 29 мая 2018

Я использую Angular v6.0.3 с материалом v6.1.0 и flexLayout v6.0.0-beta.15, у меня странная проблема, я получаю противоречивое поведение из того же углового HTML-кода (в сборке dev и prod build):

<div fxLayout="row" fxLayoutGap="20px">
  <button mat-button matStepperPrevious class="btn  btn-primary gray">{{'Back' | translate}}</button>
  <button mat-button matStepperNext class="btn  btn-primary pull-right"
  [hidden]="..."
    (click)="...">
    {{'Next' | translate}}
  </button>
</div>

Приведенный выше код иногда отображает две кнопки с требуемым промежутком в 20 пикселей между ними, а иногда отображает их без зазора (две кнопки касаются друг друга)

Этов одной сборке происходит другое поведение, если я запускаю ее на нескольких вкладках, я не понимаю, почему это происходит вообще.

Выходной HTML-код в случае правильной работы: 

<div _ngcontent-c2="" fxlayout="row" fxlayoutgap="20px" ng-reflect-layout="row" ng-reflect-gap="20px" style="flex-direction: row; box-sizing: border-box; display: flex;"
class="ng-star-inserted">
<button _ngcontent-c2="" class="btn  btn-primary gray" mat-button="" matstepperprevious="" type="button" style="margin-right: 20px;">Back</button>
<button _ngcontent-c2="" class="btn  btn-primary pull-right" mat-button="" matsteppernext="" type="submit">
Next </button>

В другом случае, когда пропуска нет: 

<div _ngcontent-c2="" fxlayout="row" fxlayoutgap="20px" ng-reflect-layout="row" ng-reflect-gap="20px" style="flex-direction: row; box-sizing: border-box; display: flex;"
    class="ng-star-inserted">
    <button _ngcontent-c2="" class="btn  btn-primary gray" mat-button="" matstepperprevious="" type="button" style="">Back</button>
    <button _ngcontent-c2="" class="btn  btn-primary pull-right" mat-button="" matsteppernext="" type="submit">
    Next </button>
</div>

Любая помощь приветствуется

1 Ответ

0 голосов
/ 11 сентября 2018

Надеюсь, это поможет кому-то еще, проблема, похоже, связана с полем, имеющим атрибут [hidden], когда я заменил скрытый атрибут тем, что элемент в *ngIf div, fxlayoutgap, похоже, работает должным образом.

<div fxLayout="row" fxLayoutGap="20px">
  <button mat-button matStepperPrevious class="btn  btn-primary gray">{{'Back' | translate}}</button>
  <button mat-button matStepperNext class="btn  btn-primary pull-right"
  [hidden]="..."
    (click)="...">
    {{'Next' | translate}}
  </button>
</div>

Теперь новый код работает так: 

<div fxLayout="row" fxLayoutGap="20px">
  <button mat-button matStepperPrevious class="btn  btn-primary gray">{{'Back' | translate}}</button>
<div *ngIf="...">
  <button mat-button matStepperNext class="btn  btn-primary pull-right"
    (click)="...">
    {{'Next' | translate}}
  </button>
</div>
</div>
...