Как применить многоуровневый выбор в angular? - PullRequest
Новая
       80

Как применить многоуровневый выбор в angular?

0 голосов
/ 12 апреля 2020

Давайте рассмотрим пример снизу от примера. Можно ли иметь таблицу с первым уровнем, используя один выбор, а расширенная строка содержит множественный выбор? Например, у меня есть список авто-производителей (Ford, Audi, BMW и др. c ...). Я хочу применить только один выбор для этого уровня. Затем у меня есть второй уровень (расширение ряда?) С моделями автомобилей (предположим, что выбор был BMW ... тогда второй уровень показывает вам Z3, X5, 328i) На этом втором уровне мне нужно применить множественный выбор. В конце концов, выбор пользователя - что-то вроде BMW - Z3, X5, например. Я открыт для других решений ... 

<p-table [columns]="cols" [value]="cars" dataKey="vin">
<ng-template pTemplate="header" let-columns>
    <tr>
        <th style="width: 3em"></th>
        <th *ngFor="let col of columns">
            {{col.header}}
        </th>
    </tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns">
    <tr>
        <td>
            <a href="#" [pRowToggler]="rowData">
                <i [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
            </a>
        </td>
        <td *ngFor="let col of columns">
            {{rowData[col.field]}}
        </td>
    </tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
    <tr>
        <td [attr.colspan]="columns.length + 1">
            <div class="ui-g ui-fluid" style="font-size:16px;padding:20px">
                <div class="ui-g-12 ui-md-3" style="text-align:center">
                    <img [attr.alt]="rowData.brand" src="assets/showcase/images/demo/car/{{rowData.brand}}.png">
                </div>
                <div class="ui-g-12 ui-md-9">
                    <div class="ui-g">
                        <div class="ui-g-12">
                            <b>Vin:</b> {{rowData.vin}}
                        </div>
                        <div class="ui-g-12">
                            <b>Year:</b> {{rowData.year}}
                        </div>
                        <div class="ui-g-12">
                            <b>Brand:</b> {{rowData.brand}}
                        </div>
                        <div class="ui-g-12">
                            <b>Color:</b> {{rowData.color}}
                        </div>
                    </div>
                </div>
            </div>
        </td>
    </tr>
</ng-template>

...