检查后表达式已更改 Angular

Question

我有这个用于上传文档的输入，我正在尝试检查它是否为空以显示警报。

这是我的代码：

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

我有这个错误：

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

我用这个viewchild取值

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

这就是我将其添加到数据库中的方法：

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

你能帮帮我吗？非常感谢！

Answer 1

问题在于使用了异步管道并在模板中引用了下面的值。

从模板中删除异步管道

In 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 你不会得到这个错误。但是你应该按照我给出的方法去做，因为给出这个错误是为了避免这种违规行为。

Answer 2

问题是您的 *ngIf 条件取决于使用数据绑定更新的输入元素的属性。为避免异常，您应该引用原始数据而不是元素属性.

下面的代码显示了如何继续使用 async 管道而不重复它。异步结果存储在 doc 对象中，该对象设置在包含 ng-container 的 *ngIf 条件中（创建对象可确保条件始终为 true）。然后我们使用 doc.url 作为 input 和 div 元素的 *ngIf 条件中的值。

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

检查后表达式已更改 Angular

Expression Changed after it has been checked Angular

angular

error-handling

upload

checked