时间戳

首页 > 解决方案 > 为什么 ngSwitch 会无限渲染模板？

angular - 为什么 ngSwitch 会无限渲染模板？

问题描述

我有以下带开关的模板：

<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>

所以，问题出在这部分代码中：

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

默认documentCustomBlock?.getVisibleControls()为空数组。当数据到来时，它开始无限渲染整个模板。

我无法得到为什么？

更新：

组件是：

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>

标签： angular

解决方案

可能的答案：

这个会尝试只采用一个可观察的发射来更新数据

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>

推荐阅读