Angular 14中select/option组件无法显示的排查与解决

问题现象 #

• 浏览器开发者工具中能看到select元素的DOM结构，但页面视觉上完全不显示
• 尝试从SpotService动态获取选项数据无效，改为组件内静态定义types、departements数组后问题仍未解决

组件代码 #

TypeScript代码 #

import { Component, Input, OnInit, AfterViewInit } from '@angular/core';
import { Router } from '@angular/router';
import { Spot} from '../spot';
import { SpotService } from '../spot.service';

declare var M: any; // 声明Materialize全局变量

@Component({
  selector: 'app-spot-form',
  templateUrl: './spot-form.component.html',
  styleUrls: ['./spot-form.component.css']
})
export class SpotFormComponent implements OnInit, AfterViewInit {
  @Input() spot: Spot;
  types: string[]= ["fdezfez", "rzefezfze", "zefdzef"]
  departements: string[] = ["fdezfez", "rzefezfze", "zefdzef"]
  isAddform: boolean;

  constructor(private spotService: SpotService, private router: Router) { }

  ngOnInit() {
    // this.types = this.spotService.getSpotTypeList();
    // this.departements = this.spotService.getDepList();
    this.isAddform = this.router.url.includes('add');
  }

  ngAfterViewInit() {
    // 初始化Materialize的select组件
    M.FormSelect.init(document.querySelectorAll('select'));
  }

  hasType(type: string): boolean {
    return this.spot.type.includes(type);
  }
}

HTML模板代码 #

<form *ngIf="spot" (ngSubmit)="onSubmit()" #spotForm="ngForm">
  <div class="row">
    <div class="col s8 offset-s2">
      <div class="card-panel">
        <div class="form-group">
          <label for="name">Nom</label>
          <input type="text" class="form-control" id="name" required pattern="^[a-zA-Z0-9àéèç ]{1,25}$"
            [(ngModel)]="spot.nom" name="name" #name="ngModel">

          <div [hidden]="name.valid || name.pristine" class="card-panel red accent-1">
            Le nom du Spot est requis (1-25).
          </div>
        </div>

        <div *ngIf="isAddform" class="form-group">
          <label for="picture">Image</label>
          <input type="url" class="form-control" id="picture" required [(ngModel)]="spot.picture" name="picture"
            #picture="ngModel">

          <div [hidden]="picture.valid || picture.pristine" class="card-panel red accent-1">
            L'image du spot est requise.
          </div>
        </div>

        <div class="form-group">
          <label for="type">Type</label>
          <!-- 修正循环变量名避免冲突，若为多选添加multiple属性 -->
          <select #typeNgModel="ngModel" name='type' class="form-control" [(ngModel)]="spot.type" multiple>
            <option *ngFor="let t of types" [value]="t">{{t}}</option>
          </select>
        </div>

        <!-- <div class="form-group">
            <select  name="departement" ngModel>
              <option  *ngFor="let departement of departements" value="departement" >{{departement}}</option>
            </select>
            <label for="departement">Département</label>
        </div> -->

        <div class="form-group">
          <label for="localisation">localisation</label>
          <input type="number" class="form-control" id="localisation" required
            pattern="^-?([1-8]?[1-9]|[1-9]0)\.{1}\d{1,6}" [(ngModel)]="spot.localisation" name="localisation"
            #localisation="ngModel">
          <div [hidden]="localisation.valid || localisation.pristine" class="card-panel red accent-1">
            [latitude,longitude]
          </div>
        </div>

        <div class="divider"></div>
        <div class="section center">
          <button type="submit" class="waves-effect waves-light btn" [disabled]="!spotForm.form.valid">
            Valider</button>
        </div>
      </div>
    </div>
  </div>
</form>
<h3 *ngIf="!spot" class="center">
  <app-loader></app-loader>
</h3>

核心排查点及解决方法 #

1. Materialize组件初始化问题

   • 模板中使用了col s8、card-panel等Materialize框架的class，该框架的select组件需要手动初始化才能正常显示
   • 在ngAfterViewInit生命周期钩子中调用M.FormSelect.init()完成初始化

2. 数据类型不匹配

   • 从hasType方法能看出spot.type是数组类型，但默认select是单选模式，绑定数组会导致渲染异常
   • 若为多选场景，给select添加multiple属性；若为单选，调整spot.type为单个字符串类型

3. 模板变量命名冲突

   • 原代码中select的模板变量#type="ngModel"与循环变量let type of types同名，虽不报错但易引发混淆，建议修改循环变量名（如改为t）

4. CSS样式排查

   • 检查组件CSS或全局CSS中是否有display: none、opacity: 0、visibility: hidden等样式隐藏了select元素
   • 检查select的高度、宽度是否被设置为0，导致视觉上不可见

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