Angular 为什么ngSwitch无限渲染模板？

我有以下带开关的temaplate：

<ng-container [ngSwitch]="block.type">
    <ng-container *ngSwitchCase="'block'">
        <div class="requestDocumentBlock">
            <div>
                <ng-container *ngTemplateOutlet="children; context: { block: block }"></ng-container>
            </div>
        </div>
    </ng-container>

    <!-- Field --->

    <ng-container *ngSwitchCase="'field'">
        <app-request-document-field [fieldDefinition]="block"></app-request-document-field>
    </ng-container>

    <!-- Custom --->

    <ng-container *ngSwitchDefault>
        <app-request-document-field
            [fieldDefinition]="block"
            *ngFor="let block of documentCustomBlock?.getVisibleControls()"
        ></app-request-document-field>
        <button (click)="setDocument()" type="button" class="btn btn-primary">Задать документ</button>
    </ng-container>
</ng-container>

模板是：

public documentCustomBlock: DocumentCustomBlock;
this.dialog
            .open(DialogLoadDocumentComponent, dialogConfig)
            .afterClosed()
            .subscribe((documentCustomBlock: DocumentCustomBlock) => {
                  this.documentCustomBlock = documentCustomBlock;
                    this.changeDetection.detectChanges();
 });

<app-request-document-field
 [fieldDefinition]="block"
 *ngFor="let block of documentCustomBlock?.getVisibleControls()"></app-request-document-field>

可能的答案：

这一个将尝试只获取一个可观测发射，它将更新数据

public documentCustomBlock: DocumentCustomBlock;
this.dialog
            .open(DialogLoadDocumentComponent, dialogConfig)
            .afterClosed()
            .pipe(
                take(1)
            )
            .subscribe((documentCustomBlock: DocumentCustomBlock) => {
                  this.documentCustomBlock = documentCustomBlock;
                    this.changeDetection.detectChanges();
 });

或

这一个将使用自动解析的异步管道

public documentCustomBlock: DocumentCustomBlock = this.dialog
    .open(DialogLoadDocumentComponent, dialogConfig)
    .afterClosed();


<app-request-document-field
    [fieldDefinition]="block"
*ngFor="let block of documentCustomBlock?.getVisibleControls() | async"
    ></app-request-document-field>

public documentCustomBlock:documentCustomBlock=this.dialog
.open（DialogLoadDocumentComponent，dialogConfig）
.后关闭（）；

函数在每个应用程序上都被调用

勾选

，这意味着您的

*ngFor

可能会重新招标很多次。将

getVisibleControls（）

的结果存储在组件中，然后在模板中对其进行迭代，这样做会更容易。再看看我的问题，我添加了ChangesName问题，当change detection设置为

onPush

时也会调用函数，因为angular无法确定它们是否会导致相同的对象引用。

public documentCustomBlock: DocumentCustomBlock = this.dialog
    .open(DialogLoadDocumentComponent, dialogConfig)
    .afterClosed();


<app-request-document-field
    [fieldDefinition]="block"
*ngFor="let block of documentCustomBlock?.getVisibleControls() | async"
    ></app-request-document-field>