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

ts里的深拷贝

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

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

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

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

@Input()majorItemTemplate!: MajorItemTemplatengOnInit(): 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)          }        })    }  }

成果

总结

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