Angular 2 Material 表单元素水平对齐

Question

我想提前感谢您抽出宝贵的时间。非常感谢您的帮助!

这是我使用 Angular 2 Material Design 创建的表单。我想知道如何对齐和？正如您在下面的快照中看到的，账单编号高于年份。

下面是代码

<md-card class="bill-form">
<md-toolbar color="warn">
    <md-card-title>{{bill.Type}}</md-card-title>
</md-toolbar>
<md-card-content class="form-content">
    <form>
        <table style="width:100%" cellspacing="0">
            <tr>
            <td>
                <md-select placeholder="Vendor" [(ngModel)]="bill.VendorShortcut" name="VendorShorcut"
                (change)="getVendor(bill.VendorShortcut)">
                    <md-option>
                    </md-option>
                    <md-option *ngFor="let vendor of vendors" [value]="vendor">
                        {{vendor}}
                    </md-option>
                </md-select>
            </td>
            <td>
                <md-select placeholder="Type" [(ngModel)]="bill.Type" name="Type" selected="'Bill'">
                    <md-option [value]="'Bill'">
                        Bill
                    </md-option>
                    <md-option [value]="'Credit'">
                        Credit
                    </md-option>
                </md-select>

            </td>
            <td>
                <md-select placeholder="Month" [(ngModel)]="bill.Month" name="Month" selected="bill.Month">
                    <md-option *ngFor="let month of months" [value]="month">
                        {{month}}
                    </md-option>
                </md-select>
            </td>
            <td>
                <md-select placeholder="Year" [(ngModel)]="bill.Year" name="Year" selected="bill.Year">
                    <md-option *ngFor="let year of years" [value]="year">
                        {{year}}
                    </md-option>
                </md-select>
            </td>
            <td>
                <md-input-container>
                    <input mdInput placeholder="Bill Number"  [(ngModel)]="bill.BillNumber" name="BillNumber">
                </md-input-container>
            </td>
            <td>
                <md-input-container align="end">
                    <input mdInput placeholder="Amount" [(ngModel)]="bill.Total" name="Total">
                    <span md-prefix>$&nbsp;</span>
                    <span md-suffix></span>
                </md-input-container>
            </td>
            </tr>
        </table>

    </form>
</md-card-content>

Answer 1

很晚才谈到这一点，但对于使用最新 Angular Material 的人来说，您可能需要考虑放弃表格和容器并使用 Angular Material 网格列表。

<mat-grid-list>
    <mat-grid-tile class="form-tile">
        Date:
    </mat-grid-tile>
    <mat-grid-tile class="form-tile">
        <input matInput placeholder="Date"  [(ngModel)]="date" name="date">
    </mat-grid-tile>
</mat-grid-list>

您可以指定行高和列数。 此控件的 API 可在此处找到:

Grid List

如果您希望在列表中进一步设置样式，请查看这篇进一步的 S-O 帖子:

Further style your grid

在上面的示例中，您将使用类 form-tile 来进一步设计您的组件。根据我的经验，这提供了一致且整洁的表单体验。