Angular中使用Fluent UI Search组件添加列表项失败求助

你用原生<datalist>绑定list属性的方式不适用于Fluent UI的<fluent-search>组件——这个自定义Web组件有自己的下拉建议实现逻辑，原生datalist机制无法与其兼容。

正确实现方式 #

1. 静态下拉项（直接在模板中定义）

使用<fluent-search-suggestion>作为<fluent-search>的子元素，这是Fluent UI Search组件官方推荐的下拉项实现方式：

<fluent-search placeholder="search" id="ice-cream-choice" name="ice-cream-choice">
  <fluent-search-suggestion value="Chocolate">Chocolate</fluent-search-suggestion>
  <fluent-search-suggestion value="Coconut">Coconut</fluent-search-suggestion>
  <fluent-search-suggestion value="Mint">Mint</fluent-search-suggestion>
  <fluent-search-suggestion value="Strawberry">Strawberry</fluent-search-suggestion>
  <fluent-search-suggestion value="Vanilla">Vanilla</fluent-search-suggestion>
</fluent-search>

2. 动态下拉项（绑定数据源）

如果下拉项是动态生成的，可通过Angular的*ngFor循环渲染：

• 组件类中定义数据源：

iceCreamOptions = ['Chocolate', 'Coconut', 'Mint', 'Strawberry', 'Vanilla'];

• 模板中循环渲染建议项：

<fluent-search placeholder="search" id="ice-cream-choice" name="ice-cream-choice">
  <fluent-search-suggestion *ngFor="let option of iceCreamOptions" [value]="option">
    {{ option }}
  </fluent-search-suggestion>
</fluent-search>

必要配置 #

确保你已在Angular项目中正确注册Fluent UI组件：

1. 安装依赖：npm install @fluentui/web-components
2. 在模块中注册组件并添加Web Components支持：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FluentSearch, FluentSearchSuggestion } from '@fluentui/web-components';

@NgModule({
  declarations: [/* 你的组件 */],
  imports: [/* 其他依赖模块 */],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // 启用自定义元素支持
  bootstrap: [/* 根组件 */]
})
export class AppModule {
  constructor() {
    // 注册Fluent UI组件
    FluentSearch.define();
    FluentSearchSuggestion.define();
  }
}

内容的提问来源于stack exchange，提问作者Madalina