关于angular:angular-附件上传-以及深拷贝

ts 里的深拷贝

原本想着点击勾销，复原数据后，能勾销掉实体的改变。比方如下图，复原数据后，A 能复原到 a 数据的状态。然而，通过测试发现, 并没有。

测试的代码, 能够看到。带星号的代码

1.ngOnInit（）的时候复制了父组件传递的数据 a，A = a。

2.在执行 close（）的时候复原了数据，A = a。

@Input()
majorItemTemplate!: MajorItemTemplate

ngOnInit(): void {this.formGroup.addControl(this.formKey.percent, new FormControl(this.majorItemTemplate.percent, Validators.required));
    this.formGroup.addControl(this.formKey.name, new FormControl(''))

*    this.minorItemTemplates = this.majorItemTemplate.minorItemTemplates;
  }

  close() {this.dialog.close();
    // 复原数据
*    this.minorItemTemplates = this.majorItemTemplate.minorItemTemplates;
    this.formGroup.get(this.formKey.percent)?.setValue(this.majorItemTemplate.percent);
    this.formGroup.get(this.formKey.name)?.setValue('');
  }

之后，通过下面的动图能够看到，复原数据，并没有胜利。

找到问题

通过多处的 console.log 输入察看到，复原数据的时候， 父组件的传递的数据曾经扭转

所以，无论怎么复原, 都无奈胜利。

大家上 c ++ 课的时候也讲过深浅拷贝

这就是 浅拷贝 带来的问题：创立一个新对象，而后将以后对象的非动态字段复制到该新对象，如果字段是值类型的，那么对该字段执行复制；如果该字段是援用类型的话，因而，原始对象及其正本援用同一个对象。

所以咱们只有把浅拷贝换成深拷贝就好了, 如下图。

[…object]

想起来，以前用到这种办法来进行深拷贝。

 // 复原数据
 this.minorItemTemplates = [...this.majorItemTemplate.minorItemTemplates];

即 es6 里的操作符, 三个点 …

es6 中引入扩大运算符（…），它用于把一个数组转化为用逗号分隔的参数序列，它罕用在不定参数个数时的函数调用，数组合并等情景。因为 typeScript 是 es6 的超集，所以 typeScript 也反对扩大运算符。

比方这样：

let arr1 = [1,2];
let arr2 = [5,6];
let newArr = [20];

//es6 应用扩大运算符
newArr = [20,...arr1,...arr2];  //[20,1,2,5,6]
console.log(newArr);

所以咱们能够用它来简略的把数组的援用指向另一个中央，即新建一个数组。

然而通过试验之后不行 。起因是， 它只是扭转了最外层数组的援用。

如果，数组的元素是一个 object, object 里也有一个属性是数组的模式。那么 object 里的数组援用并不会扭转

深拷贝

去 google 之后发现能够通过 JSON 的形式进行深拷贝，先用 JSON.stringify()变为 Json 字符串，而后再用 JSON.parse() 解析。之后运行失常

// 复原数据
this.minorItemTemplates = JSON.parse(JSON.stringify(this.majorItemTemplate.minorItemTemplates));

附件上传

用团队的 <yz-upload> 组件，批改的时候还是有款式问题。
所以就用了 ngxthy 提供的上传组件。
https://tethys.pingcode.com/c…。

这里来讲讲流程。

1. 获取 File 实体

html：

<thy-file-select class="mt-2 d-inline-block" (thyOnFileSelect)="selectFiles($event)">
  <button thyButton="primary">Click to Upload</button>
</thy-file-select>

款式：

首先，抉择上传之后会触发 selectFiles 办法。

该组件 @Output 回弹的实体是File[], 即File 数组。

能够看到，File 实体继承 Blob 实体

Blob（Binary Large Object）示意二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个繁多个体的汇合。

Blob 对象示意一个不可变、原始数据的类文件对象。能够作为文本或二进制数据读取，也能够转换为 ReadableStream，以便其办法能够用于解决数据。

2. 调用 service 办法

ts:

 selectFiles(event: { files: File[] }) {if (event.files.length === 1) {this.attachmentService.upload(event.files[0])
        .subscribe()}

service:

/**
   * 上传文件
   * @param file 文件
   */
  upload(file: File): Observable<HttpEvent<Attachment>> {const formData: FormData = new FormData();
    formData.append('file', file);
    return this.httpClient.post<Attachment>(`${this.url}/upload`,
      formData, {reportProgress: true, observe: 'events'});
  }

把 File 放在 formData 中，发动申请。

reportProgress: true 来显示任何 HTTP 申请的一些进度

observe: ‘events’为查看所有事件，包含传输进度。返回一个类型为 HttpEvent 的 Observable

所以，该响应会一直收回一个类型为 HttpEvent 的数据

HttpEvent:

这里用到的就是 HttpProgressEvent 和 HttpRespone<T>

其余的 HttpEvent 如同也不罕用到。

当附件上传中时返回 HttpProgressEvent, 上传实现时返回 HttpRespone<T>

最次要的来了，就是 HttpProgressEvent 中的，loaded 和 total。

loaded 示意已实现的进度。

total 示意总的进度。

所以，咱们 用 loaded / total 就能够获取 以后上传进度的百分比。

这里的 HttpEventType 也值得注意，总共有 5 种类型

• Sent = 0,
• UploadProgress = 1,
  // 上传进度类型
• ResponseHeader = 2,
  // 响应头类型
• DownloadProgress = 3,
  // 下载进度类型
• Response = 4,
  // 响应类型
• User = 5

mockApi

模仿返回数据

{
      method: 'POST',
      url: this.url + '/upload',
      result: (urlMatcher: string[], option: {body: FormData}) => {
        return new Observable<HttpEvent<object>>(subscriber => {
          let i = 0;
          const total = randomNumber(10000);
          interval(20).pipe(take(100),
            map(() => ++i)
          ).subscribe(data => {
            subscriber.next({
              type: HttpEventType.UploadProgress,
              loaded: data * total / 100,
              total
            } as HttpUploadProgressEvent);
            if (data === 100) {
              subscriber.next({
                type: HttpEventType.Response,
                body: {id: randomNumber(),
                  name: randomString("文件") + '.png',
                  file: {
                    path: 'basic/image/',
                    name: 'left.png'
                  }
                } as Attachment
              } as HttpResponse<Attachment>);
              subscriber.complete();}
          });
        });
      }
    }

解决 api 返回数据

当 type 为 1 时，表明正在上传。设置 loaded 和 total 的值，计算进度，给用户施行反馈。

当 type 为 4 表明上传实现。把附件增加到列表中。给用户显示已实现

selectFiles(event: { files: File[] }) {if (event.files.length === 1) {this.attachmentService.upload(event.files[0])
        .subscribe({
          next: httpEvent => {
            // type 为 4 表明上传实现
            if (httpEvent.type === 4) {this.attachments.push(httpEvent.body as Attachment)
              this.attachmentIds = this.attachments.map(attachment => attachment.id);
              // 退出逗号, 设置为 "id1,id2,id3" 格局的 string
              this.formControl.setValue(this.attachmentIds.join(','));
              // 重置进度条
              this.total = this.loaded = undefined;
            }
            // type 为 1 表明正在上传
            if(httpEvent.type === 1) {
              this.loaded = httpEvent.loaded
              this.total = httpEvent.total!;
            }
            console.log(httpEvent)
          }
        })
    }
  }

成果

总结

通过这次尝试明确了前台附件等执行流程。等之后再去了解后盾方面的解决后，置信才更能理清思路。