Angular中Bootstrap模态框打开后表单不显示问题求助

为避免重复编写代码，我创建了AddJokeModalComponent用于复用添加笑话的表单。点击添加按钮后，模态框仅显示一条窄条，内部表单无法正常显示。组件已在app.module.ts的declarations中声明，控制台无任何报错。

模态框模板代码（AddJokeModalComponent的模板） #

<ng-template #addJokeModal>
   <div class="modal-content my-custom-modal">
        <div class="modal-header">
            <h4 class="modal-title pull-left">Dodawanie żartu</h4>
            <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="modalRef?.hide()">
                <span aria-hidden="true" class="visually-hidden">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div class="adding-joke" *ngIf="!isloading">
                <form method="POST" [formGroup]="addJokeForm" (ngSubmit)="addJoke()">
                    <div class="joke-category">
                        <select name="group" class="custom-select" formControlName="category">
                            <option value="" disabled selected hidden>Wybierz kategorię</option>
                            <option *ngFor="let category of categories">{{ category.name }}</option>
                        </select>
                    </div>
                    <div class="joke-content">
                        <input placeholder="Wprowadź treść" type="text" class="form-control" formControlName="content">
                    </div>
                    <div class="cancel-joke">
                        <button class="cancel-button" (click)="cancelJoke()">Anuluj</button>
                    </div>
                    <div class="add-joke">
                        <button class="add-button" id="add_joke_button">
                            Dodaj
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</ng-template>

TypeScript代码（AddJokeModalComponent的逻辑） #

import { Component, OnInit, TemplateRef, VERSION } from '@angular/core';
import { PagesService } from '../pages.service';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-add-joke-modal',
  templateUrl: './add-joke-modal.component.html',
  styleUrls: ['./add-joke-modal.component.css']
})
export class AddJokeModalComponent {

  public jokes: any = [];
  isLoading = true
  modalRef?: BsModalRef;
  public categories: any = [];
  public isloading = true;
  addJokeForm!: FormGroup;
  get addJokeF() { return this.addJokeForm.controls; }
  constructor(
    private PagesService: PagesService,
    private modalService: BsModalService,
    private formBuilder: FormBuilder,
    private router: Router,
  ) { }

  ngOnInit(): void {
    this.addJokeForm = this.formBuilder.group({
      category: ['', Validators.required],
      content: ['', Validators.required],
    });
    this.isloading = false;
    this.loadCategories();
  }

openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template);
  }
  addJoke() {
    if (this.addJokeForm.invalid) {
      return;
    } else {
      const json_data = {
        category: this.addJokeF['category'].value,
        content: this.addJokeF['content'].value,
      }
      this.PagesService.AddJoke(json_data).subscribe(response => {
        {
          this.router.navigate(['../home']);
        }
      })
    }
  }
  loadCategories() {
    this.PagesService.LoadCategories().subscribe(response => {
      this.categories = response
      console.log(response)
    })
  }
  cancelJoke() {
    this.modalRef?.hide();
}

}

调用模态框的组件代码 #

<button class="add" (click)="openModal(addJokeModal)">Dodaj</button>

<ng-template #addJokeModal>
  <app-add-joke-modal></app-add-joke-modal>
</ng-template>

<div class="jokes">
  <div class="col-lg-6 col-sm-12 joke" *ngFor="let joke of jokes">
    <div class="category">
      {{joke.category}}
    </div>
    <div class="conent">
      {{joke.content}}
    </div>
    <button class="delete" (click)="deleteJoke(joke.id)">Usuń</button>
  </div>
</div>

问题原因及解决方法 #

1. 模态框嵌套导致结构错误 #

当前实现存在双重模板嵌套：父组件的ng-template里嵌套了app-add-joke-modal组件，而该组件内部又定义了自己的ng-template #addJokeModal，这会让ngx-bootstrap的模态框渲染逻辑混乱，无法正确识别内容结构。

修复步骤：

• 修改AddJokeModalComponent模板：移除外层的<ng-template #addJokeModal>，直接保留modal-content及其内部元素：

<div class="modal-content my-custom-modal">
    <div class="modal-header">
        <h4 class="modal-title pull-left">Dodawanie żartu</h4>
        <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="modalRef?.hide()">
            <span aria-hidden="true" class="visually-hidden">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <div class="adding-joke" *ngIf="!isloading">
            <form method="POST" [formGroup]="addJokeForm" (ngSubmit)="addJoke()">
                <div class="joke-category">
                    <select name="group" class="custom-select" formControlName="category">
                        <option value="" disabled selected hidden>Wybierz kategorię</option>
                        <option *ngFor="let category of categories">{{ category.name }}</option>
                    </select>
                </div>
                <div class="joke-content">
                    <input placeholder="Wprowadź treść" type="text" class="form-control" formControlName="content">
                </div>
                <div class="cancel-joke">
                    <button class="cancel-button" (click)="cancelJoke()">Anuluj</button>
                </div>
                <div class="add-joke">
                    <button class="add-button" id="add_joke_button">
                        Dodaj
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

• 修改父组件逻辑：直接通过modalService打开AddJokeModalComponent，无需嵌套模板：

// 父组件TS代码
import { AddJokeModalComponent } from './path/to/add-joke-modal.component';
import { BsModalService } from 'ngx-bootstrap/modal';

constructor(private modalService: BsModalService) {}

openAddJokeModal() {
  this.modalService.show(AddJokeModalComponent);
}

• 父组件模板修改：移除原嵌套模板，直接绑定按钮点击事件：

<button class="add" (click)="openAddJokeModal()">Dodaj</button>

<div class="jokes">
  <div class="col-lg-6 col-sm-12 joke" *ngFor="let joke of jokes">
    <div class="category">
      {{joke.category}}
    </div>
    <div class="conent">
      {{joke.content}}
    </div>
    <button class="delete" (click)="deleteJoke(joke.id)">Usuń</button>
  </div>
</div>

2. 样式缺失导致宽度异常 #

若修复结构后仍显示窄条，检查以下两点：

• 确保my-custom-modal类设置了合适宽度：

.my-custom-modal {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}

• 确认已正确引入ngx-bootstrap的模态框样式（可在angular.json的styles数组中添加"node_modules/ngx-bootstrap/modal/modal.css"）。

3. 变量大小写不一致问题 #

TS代码中同时存在isLoading（大写L）和isloading（小写l）两个变量，虽然当前逻辑未触发问题，但建议统一变量名，避免潜在渲染异常。

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