角度材料设计4

时间:2017-10-04 17:11:14

标签: angular angular-material

我使用this材料设计组件构建此表: enter image description here

就像你看到的那样,我使用了来自material design的幻灯片切换。

我的目标是每行不能选择多个。我想选择一个,并从对应的行中禁用其他的。

我找不到一种用于幻灯片切换的组。 API似乎对此没什么帮助。

有人可以帮我一个忙吗?

这是表的构建方式:

     Administrator Column 
    <ng-container mdColumnDef="administrator">
        <md-header-cell *mdHeaderCellDef> Administrateur </md-header-cell>
        <md-cell *mdCellDef="let user">
            <md-slide-toggle 
                id="admin_{{user.id}}"
                [checked]="checkRole('ROLE_ADMIN', user)" 
                name="ROLE_ADMIN"
                (change)="setRoles($event, user)">
            </md-slide-toggle>
        </md-cell>
    </ng-container>

     Advanced User Column 
    <ng-container mdColumnDef="advancedUser">
        <md-header-cell *mdHeaderCellDef> Utilisateur avancé </md-header-cell>
        <md-cell *mdCellDef="let user">
            <md-slide-toggle 
                id="advanced_user_{{user.id}}"
                [checked]="checkRole('ROLE_ADVANCED', user)" 
                name="ROLE_ADVANCED"
                (change)="setRoles($event, user)">
            </md-slide-toggle>
        </md-cell>
    </ng-container>

     Collaborator Column 
    <ng-container mdColumnDef="collaborator">
        <md-header-cell *mdHeaderCellDef> Collaborateur </md-header-cell>
        <md-cell *mdCellDef="let user">
            <md-slide-toggle 
                id="user_{{user.id}}"
                [checked]="checkRole('ROLE_USER', user)" 
                name="ROLE_USER"
                (change)="setRoles($event, user)">
            </md-slide-toggle>
        </md-cell>
    </ng-container>

谢谢大家!!

祝你好运, 马塞洛

0 个答案:

没有答案