Angular组件中Semantic UI Dropdown显示异常问题求助

我在Angular组件中尝试使用Semantic UI的Dropdown组件，严格按照官方文档步骤操作后，组件仍无法正常渲染。当前使用的jQuery版本为"jquery": "^3.6.0"，以下是相关代码及显示异常的截图：

HTML组件代码 #

<select name="states" class="ui selection dropdown col-md-4" multiple="" id="multi-select">
  <option value="">States</option>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
  <option value="AR">Arkansas</option>
  <option value="CA">California</option>
  <option value="OH">Ohio</option>
  <option value="OK">Oklahoma</option>
  <option value="OR">Oregon</option>
  <option value="PA">Pennsylvania</option>
  <option value="RI">Rhode Island</option>
  <option value="SC">South Carolina</option>
  <option value="SD">South Dakota</option>
  <option value="TN">Tennessee</option>
  <option value="TX">Texas</option>
  <option value="UT">Utah</option>
  <option value="VT">Vermont</option>
  <option value="VA">Virginia</option>
  <option value="WA">Washington</option>
  <option value="WV">West Virginia</option>
  <option value="WI">Wisconsin</option>
  <option value="WY">Wyoming</option>
</select>

TS组件代码 #

import {AfterViewInit, Component, OnInit} from '@angular/core';
import {Title} from "@angular/platform-browser";
declare var $: any;
@Component({
  selector: 'app-settings',
  templateUrl: './settings.component.html',
  styleUrls: ['./settings.component.scss']
})
export class SettingsComponent implements OnInit {
  selectedCountry: any = null;
  countries: any[] = [];
  constructor(private titleService:Title) {
    this.titleService.setTitle('Paramètres');
  }
  ngOnInit(){
    $('#multi-select').dropdown();
  }
}

显示异常效果 #

问题排查及解决建议 #

• DOM渲染时机问题：ngOnInit执行时DOM可能未完全渲染，改用AfterViewInit生命周期钩子初始化Dropdown，同时确保组件类实现该接口：

  export class SettingsComponent implements OnInit, AfterViewInit {
    // ...其他代码
    ngAfterViewInit(){
      $('#multi-select').dropdown();
    }
  }
  

• Semantic UI资源引入问题：确认angular.json中已正确配置Semantic UI的CSS和JS文件：

  "styles": [
    "node_modules/semantic-ui-css/semantic.min.css",
    "src/styles.scss"
  ],
  "scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/semantic-ui-css/semantic.min.js"
  ]
  

• jQuery类型声明问题：安装@types/jquery依赖并在tsconfig.json中配置类型：

  npm install @types/jquery --save-dev
  

  "types": ["jquery"]
  

• 样式冲突问题：暂时移除col-md-4类测试，排查是否与Bootstrap等框架样式冲突，或调整样式优先级。

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