Выражение изменено после проверки Angular - PullRequest
Новая
       53

Выражение изменено после проверки Angular

0 голосов
/ 29 мая 2020

У меня есть этот ввод для загрузки документа, и я пытаюсь проверить, пуст ли он, чтобы показать предупреждение.

Это мой код: 

<div class="form-group">
    <input type="file" name="file" accept="application/pdf, application/msword, application/vnd.ms-powerpoint" 
    (change)="onUpload($event)">
    <input type="text" #documentLink class="form-control" name="urlDocument" [value]="urlDocument | async">
</div>
<div *ngIf="!documentLink.value" class="alert alert-danger">
   Imaginea de coperta este necesara!
</div>

enter image description here

У меня такая ошибка: 

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
Previous value: 'ngIf: true'. Current value: 'ngIf: false'.

Я использую этот вид ребенка, чтобы взять значение 

@ViewChild('documentLink', {static: false}) inputDocumentLink : ElementRef;

, и это в моем методе добавления это в базе: 

const link = this.inputDocumentLink.nativeElement.value;
...

Вы можете мне помочь? Спасибо большое!

Ответы [ 2 ]

2 голосов
/ 29 мая 2020

Проблема в том, что ваше *ngIf условие зависит от свойства входного элемента, которое обновляется с привязкой данных. Чтобы избежать исключения, вы должны ссылаться на исходные данные вместо свойства элемента.

В приведенном ниже коде показано, как продолжать использовать канал async, не повторяя его. Результат asyn c сохраняется в объекте doc, установленном в условии *ngIf охватывающего ng-container (создание объекта гарантирует, что условие всегда равно true). Затем мы используем doc.url как значение в input и в условии *ngIf элемента div. 

<ng-container *ngIf="{ url: urlDocument | async } as doc">
  <div class="form-group">
    ...
    <input type="text" #documentLink [value]="doc.url" ...>
  </div>
  <div *ngIf="!doc.url" ...>
     Imaginea de coperta este necesara!
  </div>
</ng-container>

См. this stackblitz для демонстрации.

2 голосов
/ 29 мая 2020

Проблема заключается в использовании asyn c pipe и ссылки на это значение ниже в шаблоне.

Удалить asyn c pipe из шаблона

В Ts это как 

public inputValue;
ngOnInit() {
    this.getData();
}

public getData() {
   this.urlDocument.subscribe((res) => {
          this.inputValue = res;
   });
 }

HTML: - 

<div class="form-group">
    <input type="file" name="file" accept="application/pdf, application/msword, application/vnd.ms-powerpoint" 
    (change)="onUpload($event)">
    <input type="text" #documentLink class="form-control" name="urlDocument" [value]="inputValue">
</div>
<div *ngIf="!inputValue" class="alert alert-danger">
   Imaginea de coperta este necesara!
</div>

Причина: - при навигации по шаблону ваш URL-адрес документа не был определен, когда это angular еще один крючок жизненного цикла перепроверил шаблон, который был изменен из-за наблюдаемого испускаемого значения. Потому что в обычном ng serve angular каждое изменение обнаруживается дважды, чтобы вы знали о нарушениях в вашем коде. попробуйте запустить ng serve --prod, и вы не получите эту ошибку. Но вы должны go с подходом, который я дал, поскольку эта ошибка дана, чтобы избежать таких нарушений.

...