Angular NG-ZORRO多步骤模态框nzContent无法更新求助

你的问题核心是ViewChild变量名绑定错误，导致切换步骤时无法正确引用对应的内容模板，而footer的变量名是正确的，所以只有footer能正常更新。

错误点分析 #

在TypeScript代码中，你给modalContent1和modalContent2绑定了错误的变量名：

@ViewChild('modalContent1', { static: true }) modalFooterStep1: TemplateRef<{}>;
@ViewChild('modalContent2', { static: true }) modalFooterStep2: TemplateRef<{}>;

这里变量名应该和模板ID对应，却写成了footer的变量名，导致this.modalContent1和this.modalContent2根本不存在，自然无法更新内容。

另外还有两个小问题：

• 类中未定义isConfirmLoading变量，会导致控制台报错
• updateComponent()方法未定义，需要补充实现或移除

修正后的完整代码 #

TypeScript

import { Component, TemplateRef, ViewChild } from '@angular/core';
import { NzModalService, NzModalRef  } from 'ng-zorro-antd/modal';

@Component({
  selector: 'test-component',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.scss']
})
export class InventoryItemsListItemDetailComponent {

  // 修正ViewChild变量名，与模板ID对应
  @ViewChild('modalContent1', { static: true }) modalContent1: TemplateRef<{}>;
  @ViewChild('modalContent2', { static: true }) modalContent2: TemplateRef<{}>;
  @ViewChild('modalFooterStep1', { static: true }) modalFooterStep1: TemplateRef<{}>;
  @ViewChild('modalFooterStep2', { static: true }) modalFooterStep2: TemplateRef<{}>;
  @ViewChild('modalTitle', { static: true }) modalTitle: TemplateRef<{}>; // 可选：如果需要动态更新title可添加

  currentStep = 1;
  modalRef: NzModalRef;
  isConfirmLoading = false; // 补充定义变量

  constructor(private modal: NzModalService) {}

  showModal(): void {
    this.modalRef = this.modal.create({
      nzTitle: this.modalTitle,
      nzContent: this.modalContent1,
      nzFooter: this.modalFooterStep1,
    });
  }

  nextStep(): void {
    this.currentStep = 2;
    this.modalRef.updateConfig({
      nzContent: this.modalContent2,
      nzFooter: this.modalFooterStep2,
      // 可选：如需更新标题，可添加该行
      // nzTitle: 你的新标题模板或字符串
    });
  }

  prevStep(): void {
    this.currentStep = 1;
    this.modalRef.updateConfig({
      nzContent: this.modalContent1,
      nzFooter: this.modalFooterStep1,
    })
  }

  handleOk(): void {
    this.isConfirmLoading = true;
    setTimeout(() => {
      this.isConfirmLoading = false;
      this.modalRef.close();
      // 若有updateComponent逻辑请补充实现，否则移除该行
      // this.updateComponent();
    }, 2000);
  }

  // 如需updateComponent方法请补充实现
  // updateComponent(): void {
  //   // 你的业务逻辑
  // }
}

HTML

<button (click)="showModal()">打开模态框</button>

<ng-template #modalTitle>Test Title</ng-template>

<ng-template #modalContent1>
  <p>Step 1 Content</p>
</ng-template>

<ng-template #modalContent2>
  <p>Step 2 Content</p>
</ng-template>

<ng-template #modalFooterStep1>
  <button nz-button nzType="primary" (click)="nextStep()">Next</button>
</ng-template>

<ng-template #modalFooterStep2>
  <button nz-button nzType="default" (click)="prevStep()">Back</button>
  <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Submit</button>
</ng-template>

额外说明 #

• 修正ViewChild变量名后，this.modalContent1和this.modalContent2就能正确引用对应的模板，切换步骤时内容会正常更新
• 如果需要动态更新标题，只需在类中添加对应title模板的ViewChild引用，然后在updateConfig中修改nzTitle即可

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