Tailwind Elements Select组件在Angular *ngFor循环中无法正常工作

问题原因 #

核心问题是初始化时机不匹配：ngOnInit钩子执行时，Angular还未完成*ngFor循环的DOM渲染，此时调用initTE只能初始化页面中已存在的静态DOM元素，循环生成的Select组件还未插入到DOM中，自然无法被Tailwind Elements注册。

解决方案 #

方案1：改用AfterViewInit钩子初始化 #

AfterViewInit是Angular视图初始化完成后的钩子，此时*ngFor生成的DOM元素已全部插入页面，执行initTE就能覆盖所有Select组件。

修改app.component.ts：

import { Component, AfterViewInit } from '@angular/core';
import { Select, Datepicker, Input, initTE } from "tw-elements";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'test-tailwind-elements';

  ngAfterViewInit(): void {
    initTE({ Datepicker, Input, Select });
  }

  fruitsList: { name: string[] }[] = [
    { name: ['Mango', 'Papaya', 'Banana'] },
    { name: ['Mango', 'Papaya', 'Banana'] },
    { name: ['Mango', 'Papaya', 'Banana'] }
  ]
}

方案2：异步数据场景下的动态初始化 #

如果fruitsList是从API异步获取的，AfterViewInit可能在数据加载完成前执行，需要在数据绑定完成后手动触发Select初始化：

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { Select, Datepicker, Input, initTE } from "tw-elements";
import { YourDataService } from './your-data.service'; // 替换为你的数据服务

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
  title = 'test-tailwind-elements';
  fruitsList: { name: string[] }[] = [];

  constructor(private dataService: YourDataService) {}

  ngOnInit(): void {
    this.dataService.getFruits().subscribe(data => {
      this.fruitsList = data;
      // 用setTimeout确保Angular完成DOM更新后再初始化
      setTimeout(() => {
        initTE({ Select });
      }, 0);
    });
  }

  ngAfterViewInit(): void {
    // 初始化静态元素
    initTE({ Datepicker, Input });
  }
}

方案3：监听DOM元素变化（最灵活） #

通过ViewChildren监听*ngFor生成的Select元素，当元素列表变化时自动初始化，适用于所有静态/动态数据场景：

1. 修改app.component.ts：

import { Component, ViewChildren, ElementRef, AfterViewInit, QueryList } from '@angular/core';
import { Select } from "tw-elements";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'test-tailwind-elements';

  // 绑定模板中的select元素
  @ViewChildren('fruitSelect') fruitSelects!: QueryList<ElementRef>;

  fruitsList: { name: string[] }[] = [
    { name: ['Mango', 'Papaya', 'Banana'] },
    { name: ['Mango', 'Papaya', 'Banana'] },
    { name: ['Mango', 'Papaya', 'Banana'] }
  ]

  ngAfterViewInit(): void {
    // 初始化现有元素
    this.initSelectComponents();
    // 监听元素列表变化，动态初始化
    this.fruitSelects.changes.subscribe(() => {
      this.initSelectComponents();
    });
  }

  private initSelectComponents(): void {
    this.fruitSelects.forEach(el => {
      Select.init(el.nativeElement);
    });
  }
}

2. 修改app.component.html，给select添加模板引用变量：

<table>
    <tr>
        <th>Fruits</th>
    </tr>
    <tr *ngFor="let item of fruitsList;">
        <td>
            <select #fruitSelect data-te-select-init>
                <option value="1">Mango</option>
                <option value="2">Papaya</option>
                <option value="3">Banana</option>
            </select>
        </td>
    </tr>
</table>

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