我正在为Angular 2 Material Design应用程序中的Multi-select Drop-down创建自定义视图 . 该要求要求下拉屏幕中显示的选项的分层缩进,如下面的屏幕截图所示 .
基本上,我收到的数据集可以是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}}"> {{ data.viewValue }}</div>
<div *ngIf="{{data.viewValue.length}}==={{4}}"> {{ data.viewValue }}</div>
</md-option>
</md-select>
有人可以指导我关于实现这个的正确方法,或者是否有可用于Angular 2 Material Design的组件可用于此目的?
提前致谢 .
1 回答
您的屏幕截图包含复选框而不是
select
和option
,因此您可能希望使用md-checkbox
. 至于*ngIf
检查,您不需要使用插值 .使用
进行缩进不是最好的主意,正如您在demo中看到的那样,它会缩进数字,而不是复选框,因此采用@cgatian建议的css方法,将是更好的选择 .CSS: