angular 12+NG-ZORRO -UI中使用Modal对话框时注意

弹框的代码不能放在循环中不然就会出现黑屏了

 当时我的代码是这样写的，当然这是我的错误写法（特此记录）

<div class="pages">
    <button nz-button nzType="primary" class="addBtn">新建渠道</button>
    <div class="tableBox">
        <nz-table #basicTable [nzData]="listOfData">
            <thead>
              <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Address</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of basicTable.data">
                <td>{{ data.name }}</td>
                <td>{{ data.age }}</td>
                <td>{{ data.address }}</td>
                <td>
                    <button nz-button nzType="primary" (click)="showModal()">编辑</button>
                    <button nz-button nzType="primary" nzDanger nz-popconfirm nzPopconfirmTitle="确定删除吗？" (nzOnConfirm)="confirm()" [nzPopconfirmShowArrow]="false">删除</button>
                    <nz-modal
                    [(nzVisible)]="isVisible"
                    nzTitle="渠道编辑"
                    (nzOnCancel)="handleCancel()"
                    [nzFooter]="null"
                  >
                    <div *nzModalContent>
                      <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm(validateForm.value)">
                        <nz-form-item>
                          <nz-form-label [nzSpan]="7" nzRequired>姓名</nz-form-label>
                          <nz-form-control [nzSpan]="12" nzHasFeedback nzValidatingTip="Validating..." [nzErrorTip]="userErrorTpl">
                            <input nz-input formControlName="userName" [ngModel]="userName" />
                            <ng-template #userErrorTpl let-control>
                              <ng-container *ngIf="control.hasError('required')">请输入您的姓名!</ng-container>
                              <ng-container *ngIf="control.hasError('duplicated')">The username is redundant!</ng-container>
                            </ng-template>
                          </nz-form-control>
                        </nz-form-item>
                        <nz-form-item>
                          <nz-form-label [nzSpan]="7" nzRequired>手机号</nz-form-label>
                          <nz-form-control [nzSpan]="12" nzHasFeedback >
                            <input nz-input formControlName="mobile" [ngModel] = "mobile" />
                          </nz-form-control>
                        </nz-form-item>
                        <nz-form-item>
                          <nz-form-label [nzSpan]="7" nzRequired>标识特征</nz-form-label>
                          <nz-form-control [nzSpan]="12" nzHasFeedback>
                            <input nz-input formControlName="channelCode" [ngModel] = "channelCode" />
                          </nz-form-control>
                        </nz-form-item>
                        <nz-form-item>
                          <nz-form-label [nzSpan]="7" nzRequired>计费方式</nz-form-label>
                          <nz-form-control [nzSpan]="12">
                            <nz-radio-group [(ngModel)]="radioValue" formControlName="radioGroup" >
                              <label nz-radio nzValue="CPA">CPA</label>
                              <label nz-radio nzValue="CPS">CPS</label>
                            </nz-radio-group>
                          </nz-form-control>
                        </nz-form-item>
                        <nz-form-item>
                          <nz-form-label [nzSpan]="7" nzRequired>有效判断</nz-form-label>
                          <nz-form-control [nzSpan]="12" nzHasFeedback>
                            <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择有效判断" [(ngModel)]="selectedValue" formControlName="effectiveJudgment">
                              <nz-option nzLabel="关注" nzValue="关注"></nz-option>
                              <nz-option nzLabel="打开小程序" nzValue="打开小程序"></nz-option>
                              <nz-option nzLabel="领外卖红包" nzValue="领外卖红包"></nz-option>
                            </nz-select>
                          </nz-form-control>
                        </nz-form-item>

                        <nz-form-item>
                          <nz-form-control [nzOffset]="8" [nzSpan]="8">
                            <button nz-button nzType="primary" [nzLoading]="isLoadingOne" nzBlock [disabled]="!validateForm.valid">保存</button>
                          </nz-form-control>
                        </nz-form-item>
                      </form>
                    </div>
                  </nz-modal>
                </td>
              </tr>
            </tbody>
        </nz-table>
    </div>
</div>

把弹框的代码拿到外层一切就ok了

<div class="pages">
    <button nz-button nzType="primary" class="addBtn">新建渠道</button>
    <div class="tableBox">
        <nz-table #basicTable [nzData]="listOfData">
            <thead>
              <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Address</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of basicTable.data">
                <td>{{ data.name }}</td>
                <td>{{ data.age }}</td>
                <td>{{ data.address }}</td>
                <td>
                    <button nz-button nzType="primary" (click)="showModal()">编辑</button>
                    <button nz-button nzType="primary" nzDanger nz-popconfirm nzPopconfirmTitle="确定删除吗？" (nzOnConfirm)="confirm()" [nzPopconfirmShowArrow]="false">删除</button>
                </td>
              </tr>
            </tbody>
        </nz-table>
    </div>
    <nz-modal
    [(nzVisible)]="isVisible"
    nzTitle="渠道编辑"
    (nzOnCancel)="handleCancel()"
    [nzFooter]="null">
    <div *nzModalContent>
      <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm(validateForm.value)">
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzRequired>姓名</nz-form-label>
          <nz-form-control [nzSpan]="12" nzHasFeedback nzValidatingTip="Validating..." [nzErrorTip]="userErrorTpl">
            <input nz-input formControlName="userName" [ngModel]="userName" />
            <ng-template #userErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">请输入您的姓名!</ng-container>
              <ng-container *ngIf="control.hasError('duplicated')">The username is redundant!</ng-container>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzRequired>手机号</nz-form-label>
          <nz-form-control [nzSpan]="12" nzHasFeedback >
            <input nz-input formControlName="mobile" [ngModel] = "mobile" />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzRequired>标识特征</nz-form-label>
          <nz-form-control [nzSpan]="12" nzHasFeedback>
            <input nz-input formControlName="channelCode" [ngModel] = "channelCode" />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzRequired>计费方式</nz-form-label>
          <nz-form-control [nzSpan]="12">
            <nz-radio-group [(ngModel)]="radioValue" formControlName="radioGroup" >
              <label nz-radio nzValue="CPA">CPA</label>
              <label nz-radio nzValue="CPS">CPS</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzRequired>有效判断</nz-form-label>
          <nz-form-control [nzSpan]="12" nzHasFeedback>
            <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择有效判断" [(ngModel)]="selectedValue" formControlName="effectiveJudgment">
              <nz-option nzLabel="关注" nzValue="关注"></nz-option>
              <nz-option nzLabel="打开小程序" nzValue="打开小程序"></nz-option>
              <nz-option nzLabel="领外卖红包" nzValue="领外卖红包"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-control [nzOffset]="8" [nzSpan]="8">
            <button nz-button nzType="primary" [nzLoading]="isLoadingOne" nzBlock [disabled]="!validateForm.valid">保存</button>
          </nz-form-control>
        </nz-form-item>
      </form>
    </div>
    </nz-modal>
</div>