Элемент Div загружается правильно только после кликов - PullRequest
Новая
       13

Элемент Div загружается правильно только после кликов

0 голосов
/ 24 октября 2018

У меня проблемы с загрузкой динамических div-ов в Angular.Я сделал кнопку, которая добавляет новые div-ы при каждом нажатии на определенную область.Но проблема возникает после того, как я их добавил, поскольку они отображаются неправильно:

Imagem 1

Редактор и календарь (оба выполнены PrimeNG)не показано после добавления такого div, как показано на рисунке выше.Но после того, как я дважды щелкну текстовое поле (помечено красным на рисунке ниже), компоненты загружаются.

Imagem 2

Вот код 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);
    }
}

Спасибо за помощь заранее!

1 Ответ

0 голосов
/ 24 октября 2018

Вероятно, это общая проблема неправильного определения изменений.Добавьте ChangeDetectorRef инъекцию в ваш компонент: 

constructor (..., changeDetector: ChangeDetectorRef)

и вызовите detectChanges после добавления / удаления: 

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