fxLayout =角/フレックスレイアウト@ "行" "： "2.0.0-beta.1" と角度material2

Question

<p class="normal-gray-txt text-center"> 
    <b> 
    Choose reference 
    architecture 
    </b> 
</p> 
<form[formGroup=""]="custAppDetail" (ngSubmit="" 
fxLayout="column" > 
    <div fxLayout = "row" > 
    <label fxFlex="1 6 60%"> Architecture file source</label> 
    <md-select fxFlex = "3 1 40%" placeholder="abc" 
     formControlName="archFileSource" (ngModelChange="")="toNeoGit($event)"> 
     <md-option* ngFor = "let env of archFileSrc"[value=""] = "env.value" > 
     {{ env.viewValue }} 
     </md-option> 
    </md-select> 
    </div> 
    <div fxLayout = "row" > 
    <label fxFlex="1 6 60%"> Architecture file</label> 
    <md-select fxFlex = "3 1 40%" placeholder= "Choose file" formControlName= "archFile" >  
     <md - option * ngFor = "let env of ar"[value] = "env.value" > 
     { { env.viewValue } } 
     </md-option> 
    </md-select> 
    </div> 
    <div fxLayout = "row" > 
    <label fxFlex="1 6 60%"> Name</label> 
    <md-input fxFlex = "3 1 40%" type="text" placeholder="Enter Name" 
    formControlName="name"> 
    </md-input> 
    </div> 
    <div fxLayout = "row" > 
    <label fxFlex="1 6 60%"> Cloud</label> 
    <md-select fxFlex = "3 1 40%" placeholder="Choose Chain" 
    formControlName="chaintype" (ngModelChange="")="toEnv($event)"> 
     <md-option* ngFor = "let env of cl"[value=""] = "env.value" > 
     {{ env.viewValue }} 
     </md-option> 
    </md-select> 
    </div> 
    <div fxLayout = "row" > 
    <label fxFlex="1 6 60%"> Enviroment</label> 
    <md-select fxFlex = "3 1 40%" placeholder="Choose Environment" 
     formControlName="selEnv"> 
     <md-option* ngFor = "let env of enviroment"[value=""] = "env.value" > 
     {{ env.viewValue }} 
     </md-option> 
    </md-select> 
    </div> 
    <div class="box-btn-dialog" [hidden=""]="ftUser"> 
    <button md-raised-button="" class="auto-btn-prime" 
     disabled=""]="!custAppDetail.valid" type="submit">LAUNCH</button> 
    <button md-raised-button="" class="auto-btn-gray" md-dialog-close="cancel" 
    type="button">CANCEL</button> 
    </div> 
</form> 

最初の行fxLayout =は、" 行」は4の残りのために動作しなく私は "@ angle/core"を使用しています： "^ 2.4.3"、 "@ angular/flex-layout"：最初の行がレンダリングされるので、 2.0.0-beta.1 "、 また、md-selectの高さはmd-inputと異なっていますが、フィールドの高さは同じにすることができます

Answer 1

コメントに記載されているように、あなたのHTMLの間違ったコードは、* ngFor、md-raised-button=""、[hidden=""]="ftUser"、disabled=""]="!custAppDetail.valid"。一度それらのものをきれいにすると、コードは正常に動作するようです。

HTML：

<p class="normal-gray-txt text-center"> 
    <b> 
    Choose reference 
    architecture 
    </b> 
</p> 
<form fxLayout="column" > 
    <div fxLayout = "row" class="row-height"> 
    <label fxFlex="1 6 60%"> Architecture file source</label> 
    <md-select fxFlex = "3 1 40%" placeholder="abc"> 
     <md-option *ngFor = "let env of [1, 2, 3, 4]" > 
     {{ env }} 
     </md-option> 
    </md-select> 
    </div> 
    <div fxLayout = "row" class="row-height"> 
    <label fxFlex="1 6 60%"> Architecture file</label> 
    <md-select fxFlex = "3 1 40%" placeholder= "Choose file">  
     <md-option *ngFor = "let env of [1, 2, 3, 4]" > 
     {{ env }} 
     </md-option> 
    </md-select> 
    </div> 
    <div fxLayout = "row" class="row-height"> 
    <label fxFlex="1 6 60%"> Name</label> 
    <md-input fxFlex = "3 1 40%" placeholder="Enter Name"> 
    </md-input> 
    </div> 
    <div fxLayout = "row" class="row-height"> 
    <label fxFlex="1 6 60%"> Cloud</label> 
    <md-select fxFlex = "3 1 40%" placeholder="Choose Chain"> 
     <md-option *ngFor = "let env of [1, 2, 3, 4]" > 
     {{ env }} 
     </md-option> 
    </md-select> 
    </div> 
    <div fxLayout = "row" class="row-height"> 
    <label fxFlex="1 6 60%"> Enviroment</label> 
    <md-select fxFlex = "3 1 40%" placeholder="Choose Environment"> 
     <md-option *ngFor = "let env of [1, 2, 3, 4]" > 
     {{ env }} 
     </md-option> 
    </md-select> 
    </div> 
    <div class="box-btn-dialog"> 
    <button md-raised-button class="auto-btn-prime">LAUNCH</button> 
    <button md-raised-button class="auto-btn-gray">CANCEL</button> 
    </div> 
</form> 

Plunker demo

コンポーネントのスタイルシートにこれらのCSSを追加し、入力行の高さの問題を修正するには。

.row-height{ 
    min-height: 55px; 
} 

md-input{ 
    margin-top: -15px !important; 
}