Угловой выбор материала - настройка шаблона - PullRequest
Новая
       5

Угловой выбор материала - настройка шаблона

0 голосов
/ 04 ноября 2019

В настоящее время мы используем NG Bootstrap, и его необходимо заменить по разным причинам. Я выступаю за использование Angular Material вместо него. Тем не менее, для выпадающего списка множественного выбора нам нужен вывод mat-select, который будет выглядеть примерно так:

ng-dropdown example

, а не это:

mat-select example

Следует отметить, что каждый элемент является отдельным виджетом, к которому прикреплена близкая ссылка (x). Ссылка может быть нажата, и нажатие на нее удаляет элемент.

Проверка выходных данных ng-select дает следующие выходные данные: 

<div class="ng-value-container"><div class="ng-placeholder">Select States...</div><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]",
  "ng-reflect-ng-template-outlet": "[object Object]"
}--><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--><div _ngcontent-c61="" class="ng-value"><span _ngcontent-c61="" class="ng-value-label"><i _ngcontent-c61="" class="icon-earth"></i> Alabama (AL)</span><span _ngcontent-c61="" aria-hidden="true" class="ng-value-icon right">×</span></div><div _ngcontent-c61="" class="ng-value"><span _ngcontent-c61="" class="ng-value-label"><i _ngcontent-c61="" class="icon-earth"></i> Arizona (AZ)</span><span _ngcontent-c61="" aria-hidden="true" class="ng-value-icon right">×</span></div><div _ngcontent-c61="" class="ng-value"><span _ngcontent-c61="" class="ng-value-label"><i _ngcontent-c61="" class="icon-earth"></i> California (CA)</span><span _ngcontent-c61="" aria-hidden="true" class="ng-value-icon right">×</span></div><!----><!----><div class="ng-input"><input role="combobox" type="text" autocomplete="a409ea53b6de" autocorrect="off" autocapitalize="off" aria-expanded="true" aria-owns="a409ea53b6de" aria-activedescendant="aa8ba66e7ecc"></div></div>

И проверка вывода выбора коврика дает вам такой вывод: 

<span class="ng-tns-c5-5 ng-star-inserted">Alabama (AL), Arizona (AZ), California (CA)</span>

Как видите, последний просто выводит один большой текстовый блок, разделенный запятыми.

Просмотр документации API (https://material.angular.io/components/select/api) и примеры (https://material.angular.io/components/select/examples) Я не вижу способа сделать это. Большинство поисковых запросов в Google дали результаты, относящиеся к стилю и тематике. Я нашел эту ссылку (Пользовательский родительский контейнер для оверлейного материала Angular? ), но он не вдавается в подробности, и я даже не уверен, что это то, что я пытаюсь сделать.

Кто-нибудь сделал? это? В ng-bootstrap это очень просто. Просто предоставьте ng-шаблон с правильной директивой, и он заменит шаблон по умолчанию.

Спасибо.

Аарон

Ответы [ 2 ]

1 голос
/ 04 ноября 2019

Вы можете использовать компонент автозаполнения чипов из углового материала для достижения желаемого результата

https://stackblitz.com/angular/olggjybxblp?file=src%2Fapp%2Fchips-autocomplete-example.ts

Вы можете применить свой CSS, чтобы он выглядел как ваш дизайн

1 голос
/ 04 ноября 2019

Глядя на документы, вы можете указать собственный шаблон для вашего выбора. https://material.angular.io/components/select/overview#customizing-the-trigger-label.

mat-select-trigger - это ваш пользовательский шаблон 

<mat-form-field>
  <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
    <mat-select-trigger>
     <span class="custom" *ngFor="let top of toppings.value">
       {{top}}
     </span>
    </mat-select-trigger>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

Проверьте демо на stackblitz.

...