angular - 如何在 Angular 中使用 mdc 增强选择？

Question

我目前正在尝试实现发布于:https://material.io/develop/web/components/input-controls/select-menus/ 的“增强选择”示例。 。这是代码:

    <div class="mdc-select demo-width-class">
  <input type="hidden" name="enhanced-select">
  <i class="mdc-select__dropdown-icon"></i>
  <div class="mdc-select__selected-text"></div>
  <div class="mdc-select__menu mdc-menu mdc-menu-surface demo-width-class">
    <ul class="mdc-list">
      <li class="mdc-list-item mdc-list-item--selected" data-value="" aria-selected="true"></option>
      <li class="mdc-list-item" data-value="grains">
        Bread, Cereal, Rice, and Pasta
      </li>
      <li class="mdc-list-item" data-value="vegetables">
        Vegetables
      </li>
      <li class="mdc-list-item" data-value="fruit">
        Fruit
      </li>
    </ul>
  </div>
  <span class="mdc-floating-label">Pick a Food Group</label>
  <div class="mdc-line-ripple"></div>
</div>

当我尝试做类似的事情时:

                <input type="hidden" name="enhanced-select">
                <i class="mdc-select__dropdown-icon"></i>
                <div class="mdc-select__selected-text"></div>
                <div class="mdc-select__menu mdc-menu mdc-menu-surface demo-width-class">
                    <ul class="mdc-list" id="listbox1">
                        <li class="mdc-list-item--selected mdc-select__native-control" [attr.data-value]=""></li>
                        <li *ngFor="let option of options" class="mdc-list-item" [attr.data-value]="option.value">
                            {{ option.label }}
                        </li>
                    </ul>
                </div>

当我尝试选择选项时没有任何反应。所以我想知道我做错了什么？

我的目标是获得类似于“填充增强选择”的功能，如图所示:

enter image description here

Answer 1

你知道 Angular-MDC 吗？它已经完成了您想要完成的任务。

在此处查看增强示例: https://trimox.github.io/angular-mdc-web/#/angular-mdc-web/select-demo/examples

增强版本需要使用此结构

<mdc-select>
 <mdc-menu>
  <mdc-list>
    <mdc-list-item>...