div 元素只有在点击后才能正确加载答案

【问题标题】：Div element is only loading correctly after clicksdiv 元素只有在点击后才能正确加载
【发布时间】：2019-03-29 02:31:33
【问题描述】：

在 Angular 上加载动态 div 时我遇到了一些麻烦。我制作了一个按钮，可以在每次点击特定区域时添加新的 div。但是一旦我添加它们就会出现问题，因为它们显示不正确：

编辑器和日历（都是PrimeNG制作的）在我添加这样的div后没有显示，如上图所示。但是当我在文本框（下图中标记为红色）上单击两次后，组件就会加载。

这是我用来展示的 HTML 代码。

<div class="ui-g-9" style="border: 2px solid #c8c8c8; border-radius: 5px;">
        <section class="card" style="display: flex; overflow-x: auto; overflow-y: unset;">
                <div *ngFor="let disparaEmail of disparaEmails" class="ui-g-4" style="margin-right: 10px; border: 1px solid #c8c8c8; border-radius: 5px; min-width: 466.828px;">

                    <p class="titulo-campo font1 fw700">Assunto:</p>
                    <textarea pInputTextarea [rows]="2" [(ngModel)]="disparaEmail.assuntoEmail" style="width: 100%; resize:unset; font-size: 18px;"></textarea>

                    <p class="titulo-campo font1 fw700">Tipo de Aviso:</p>
                    <p-editor [style]="{'height':'300px'}" [(ngModel)]="disparaEmail.msgEmail"></p-editor>

                    <p class="titulo-campo font1 fw700">Data:</p>
                    <p-calendar [(ngModel)]="disparaEmail.dataEmail" dateFormat="dd/mm/yy" showButtonBar="true" [locale]="br" [monthNavigator]="true"
                        [yearNavigator]="true" yearRange="2018:2050"></p-calendar>

                </div>
        </section>
</div>

 <div style="display: inline-grid;">
        <i class="fa fa-plus botoes-chamada" (click)="addAviso()" style="color: #819049; padding:30px; margin-bottom: 10px;" pTooltip="Adicionar um tipo de aviso."></i>
        <i class="fa fa-minus botoes-chamada" (click)="deletaAviso()" style="color: #905149; padding:10px;" pTooltip="Remover o último tipo de aviso inserido."></i>
 </div>

这里是 TS 部分：

addAviso(){
    this.disparaEmails.push(new EmailDispara());
}

deletaAviso(){
    if (this.disparaEmails.length > 1){
        this.disparaEmails.splice(this.disparaEmails.length - 1, 1);
    }
}

提前感谢您的帮助！

【问题讨论】：

您的 Angular 问题中似乎没有任何 Angular 代码。
哦！对于那个很抱歉！我应该放入 TypeScript 部分，还是可以@isherwood？
你能添加ts文件吗？如果可能的话，在stackblitz.com中模拟问题
当然。如果没有它，我们如何对您的应用进行故障排除？特别是addAviso() 和deletaAviso()，还有其他相关的内容。
那里！ TS部分我加了，一会儿再分享stackblitz模拟。

标签： javascript html angular typescript primeng

【解决方案1】：

这可能是无法正确检测更改的常见问题。在组件中添加ChangeDetectorRef 注入：

constructor (..., changeDetector: ChangeDetectorRef)

并在添加/删除后调用detectChanges：

addAviso(){
    this.disparaEmails.push(new EmailDispara());
    this.changeDetector.detectChanges(); // <- this line here
}

【讨论】：

这是正确的伎俩！我会记住这个变化检测器，谢谢！