时间戳

首页 > 解决方案 > 错误未显示在 Angular 的 HTML 端

angular - 错误未显示在 Angular 的 HTML 端

问题描述

我们正在尝试设置上传图像大小的限制。当它大于 2mb 时，它会在控制台日志上显示错误： 文件超出最大大小 ，因为在添加的所有函数上，err => console.log(err) 但是当我们用它替换它err => err并在 html 中添加这一行时：

<p *ngIf="err"> {{err}}</p>

它根本没有显示。这是完整的代码：

OnFileSelected(event) {
    const file: File = event[0];

    this.ReadAsBase64(file)
      .then(result => {
        this.selectedFile = result;
      })
      // tslint:disable-next-line:no-unused-expression
      .catch (err => err);
      // Here was .catch(err => console.log(err)); before
  }

  Upload() {
    if (this.selectedFile) {
      this.usersService.AddImage(this.selectedFile).subscribe(
        data => {
          this.socket.emit('refresh', {});
          console.log(data);
        },
        err => err
        // Here was  err => console.log(err) before
      );
    }
  }

  ReadAsBase64(file): Promise<any> {
    const reader = new FileReader();
    const fileValue = new Promise((resolve, reject) => {
      reader.addEventListener('load', () => {
        const result = reader.result;
        if (!result) reject('Cannot read variable');
        if (result.length * 2  > 2**21) reject('File exceeds the maximum size'); // Note: 2*2**20 = 2**21 
        resolve(reader.result);
      });

      reader.addEventListener('error', event => {
        reject(event);
      });

      reader.readAsDataURL(file);
    });

    return fileValue;
  }

HTML

 <p *ngIf="err"> {{err}}</p>

如何使它显示带有上述函数错误的错误的这个 p 标签？

标签： angulartypescriptangular6

解决方案

您需要将err对象应用于组件对象

public err: any;

Upload() {
    if (this.selectedFile) {
      this.usersService.AddImage(this.selectedFile).subscribe(
        data => {
          this.socket.emit('refresh', {});
          console.log(data);
        },
        err => this.err = err
        // Here was  err => console.log(err) before
      );
    }
  }

您不能将 html 绑定到函数内部回调中的变量，该err对象是回调私有的。

推荐阅读