Angular 2 Material 设计多 select 带分层缩进的下拉菜单

Question

我正在为 Angular 2 Material 设计应用程序中的多 select 下拉菜单创建自定义视图。该要求要求对下拉列表中显示的选项进行分层缩进，如下面的屏幕截图所示。

基本上，我收到的数据集的长度可以是2位、3位或4位。我需要根据数据字段的长度应用缩进。

我尝试了多种选择，但到目前为止我一直无法实现这个目的。我所做的最新代码尝试具有以下类型的代码片段：

<md-select multiple placeholder="Data" [(ngModel)]="selecteddatas" (ngModelChange)="onChange($event)">
            <md-option *ngFor="let data of datas" [value]="data.value">
                <div *ngIf="{{data.viewValue.length}}==={{2}}">{{ data.viewValue }}</div>
                <div *ngIf="{{data.viewValue.length}}==={{3}}">&nbsp;&nbsp;{{ data.viewValue }}</div>
                <div *ngIf="{{data.viewValue.length}}==={{4}}">&nbsp;&nbsp;&nbsp;&nbsp;{{ data.viewValue }}</div>
            </md-option>
        </md-select>

有人可以指导我实现这个的正确方法，或者是否有可用于 Angular 2 Material 设计的组件，我可以用于此目的？

提前致谢。

Answer 1

您的屏幕截图包含复选框，而不是 select 和 option，因此您可能需要使用 md-checkbox。至于 *ngIf 检查，您不需要为此使用插值。

使用   进行缩进不是最好的主意，正如您在 demo 中看到的那样，它缩进了数字，而不是复选框，因此采用 css 方法作为@cgatian 建议，会是更好的选择。

<div *ngFor="let item of filteredList">
  <div [ngClass]="{'one-indent': item.number.length == 2, 
                   'two-indent': item.number.length == 3,
                   'three-indent': item.number.length == 4 }">
    <md-checkbox [checked]="item.value">
      {{ item.number }}
    </md-checkbox>
  </div>
</div>

css:

.one-indent{
  margin-left: 5px;
}

.two-indent{
  margin-left: 15px;
}

.three-indent{
  margin-left: 25px;
}

Angular 2 Material 设计多 select 带分层缩进的下拉菜单

Angular 2 Material Design Multi-select Drop-down with Hierarchical Indentation

material-design

angular-material2

angular