1

我在循环open()内渲染的项目中调用 NgbModal 时遇到问题*ngFor。

我有一个要显示的项目列表。在click上述项目中，我希望打开一个模式以提示用户提供一些附加信息。

单击该项目时，我可以看到元素通过 DevTools 添加到 DOM，但模态没有show添加类。应该呈现为模态内容的组件也未正确初始化。如果我show手动将类添加到它，我可以看到模式的内容，但组件不能正常工作。

重要的是要注意，为了测试，我添加了一个订阅点击事件的按钮，它将一个假项目传递给相同的函数，setSelected(). 这种打开模式的方法没有问题。该问题仅在*ngFor.

我有一个console.loginside of ConnectionModalComponent's （作为模态的内容传递）构造函数和另一个 in it's ngAfterViewInit. 通过外部的按钮激活模式时*ngFor，我在控制台中看到两个日志语句，但是当从内部激活模式时，*ngFor我只看到构造函数的日志语句而不是后者。

我正在使用@angular/core@12.1.2& @ng-bootstrap/ng-bootstrap@10.0.0。

testComponent.html.ts - 具有 *ngFor 的组件

        <div>
          <div
            *ngFor="let item of items"
            (click)="setSelected(item)"
          >
            <span class="full-height">
              <div class="card-body">
                <div class="card-title">
                  {{ item.nickname }}
                </div>
              </div>
            </span>
          </div>
        </div>

testComponent.component.ts - 从 HTML 模板调用的函数。

  public setSelected(item: ItemViewModel): void {
    this.testAlertService.open();
  }

testAlert.service.ts - 从组件调用以打开 NgbModal 的服务。

import { Injectable } from '@angular/core';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';

import { ConnectionModalComponent } from '../../components/shared';

@Injectable()
export class TestAlertService {
  constructor(private modalService: NgbModal) {}

  open() {
    this.modalService.open(ConnectionModalComponent, { ariaLabelledBy: 'modal-basic-title' }).result.then(
      (result) => {
        console.log(`Closed with: ${result}`);
      },
      (reason) => {
        console.log(`Dismissed ${this.getDismissReason(reason)}`);
      }
    );
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return `with: ${reason}`;
    }
  }
}
4

1 回答 1

0

我能够解决这个问题。

在testComponent.component.ts我推送到items数组的地方，我detectChanges()在类上使用了一个方法ChangeDetectorRef。

通过简单地包装数组突变来使用NgZone'run()解决了我所有的问题。

于 2021-09-29T20:52:28.737 回答