javascript - 为什么 ngIf 会破坏其中组件的功能？我应该如何处理这种情况？

Question

我的目标是为尚未填充信息的部分设置一些按钮占位符。填充的部分具有卡片外观，并具有一个编辑按钮，该按钮可以激活编辑（通过 froala，富文本编辑器）或带有表单输入的向导。我的意图是在卡片未填充或未编辑时隐藏卡片，并让占位符按钮仅显示卡片然后触发编辑，这会使 froala 弹出。这是代码：

[一个卡片组件 - 包括破坏 ngIf]

        <div class="mat-card margin-bottom-16" *ngIf="!!this.project.description || editingProjectDescription">
            <div class="section-header">
                <div class="section-header-title">
                    <span>{{ 'SHARED.LABEL.DESCRIPTION' | translate }}</span>
                </div>
                <div class="section-actions" *ainPermission="{ name: 'ProjectEdit', params: project }">
                    <button *ngIf="!isLightProject" mat-icon-button (click)="editDescription()">
                        <mat-icon aria-label="edit">edit</mat-icon>
                    </button>
                    <button *ngIf="!isLightProject" mat-icon-button [popper]="popper2Content"
                        [popperShowOnStart]="false" [popperTrigger]="'hover'" [popperApplyClass]="'tooltip'"
                        [popperHideOnClickOutside]="true" [popperHideOnScroll]="true" [popperPlacement]="'right'">
                        <i class="material-icons info-color">info</i>
                    </button>
                    <popper-content class="tooltip-text" #popper2Content>
                        <span class="tooltip-text">{{ 'PROJECT.TOOLTIPS.DESCRIPTION' | translate }}</span>
                    </popper-content>
                </div>
            </div>
            <div class="description mat-typography mat-body-1">
                <ain-inline-froala-editor #inlineFroalaDescription [data]="inlineFroalaDescriptionConfig"
                    [add]="!this.project.description"></ain-inline-froala-editor>
            </div>
        </div>

[来自包含卡片的组件的代码]

export class ProjectViewGeneralComponent implements OnInit, OnDestroy {

    project: Project;
    ...
    editingProjectDescription = false;
    editingProjectPlan = false;

    @ViewChild('inlineFroalaDescription', { static: true }) inlineFroalaDescription: InlineFroalaEditorComponent;
    @ViewChild('inlineFroalaProjectPlan', { static: true }) inlineFroalaProjectPlan: InlineFroalaEditorComponent;

    ...

    editDescription(): void {
        this.inlineFroalaDescription.show();
    }

    showDescription(): void {
        this.editingProjectDescription = true;
    }

    get inlineFroalaDescriptionConfig(): Object {
        return {
            action: ProjectActions.UpdateProjectDescription,
            mode: 'simpleExtended',
            extraConfig: {
                placeholderText: this.translate.instant('PROJECT.TEXT.DESCRIPTION_PLACEHOLDER')
            },
            storeName: 'project',
            value: this.project.description,
            required: true,
            requiredProp: {
                id: this.project.id,
                valueProperty: 'description'
            }
        };
    }

    ...

[错误] ERROR TypeError: Cannot read property 'show' of undefined in the editDescription 方法，这一行

this.inlineFroalaDescription.show();

基本上'inlineFroalaDescription' 不复存在。

标签： javascriptangulartypescriptangular-material