如何在angular中使用mdc增强的select？

我目前正在尝试实现发布于的“增强的选择”示例：。代码如下：

    <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>

{{option.label}

当我尝试选择选项时，什么都没有发生。 所以我想知道我做错了什么

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

---

您知道角度mdc吗？它已经完成了你想要完成的事情

请看这里的增强示例：

对于增强版，您需要使用此结构

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

...