angular - 表达式在检查 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

问题是使用异步管道并在模板中引用该值。

从模板中删除异步管道

在 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 文档未定义，当它的另一个生命周期钩子(Hook)重新检查模板时，它已更改，因为可观察到的发射值。因为在正常的 ng serve angular 中，每次更改检测都会两次，以让您知道代码中的不规则性。尝试运行 ng serve --prod 你不会得到这个错误。但是你应该采用我给出的方法，因为这个错误是为了避免这种违规行为。