Angular6笔记（4）

1.isArray()方法用于判断是否是数组，用法Array.isArray()：

e.g:

Array.isArray([]); // 返回true	Array.isArray(); // 返回false
Array.isArray([1]);	Array.isArray({ });
Array.isArray(new Array());	Array.isArray(null);
	Array.isArray(undefined);
	Array.isArray(true);
	Array.isArray(Array);

2.substring方法用于提取字符串中介于两个指定下标间的字符串：

substring （start ， end）

开始和结束的位置，从零开始的索引，包头不包尾

其中satrt必须传，且是一个非负的整数，规定要提取的子串的第一个字符在stringObject 中的位置；end可传可不传，是一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1，如果省略该参数，那么返回的子串会一直到字符串的结尾。这个方法的返回值是一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从start处到end -1 处的所有字符，其长度为end 减 start。

PS：（1）substring 方法返回的字串包括 start 处的字符，但是不包括 end 处的字符
（2）如果start 和 end相等，那么该方法返回的就是一个空串（也就是长度为0 的字符串）
（3）如果start比end 大，那么该方法在提取字串之前会交换这两个参数
（4）如果start或者end 为负数，那么他将会被替换成0

substr方法用于返回一个从指定位置开始的指定长度的字符串：

stringObject.substr（start, length）

开始的位置和截取的长度

其中start必传，是所需的字符串的起始的位置，要注意的是字符串中的第一个字符的索引为0。length可选，表示返回的子字符串中应包括的字符个数。

PS：（1）如果start为负数，则start = str.length+start
（2）如果length 为0 或者负数，将返回一个空字符串
（3）如果没有指定该参数，则字符串将延续到stringObject的最后

3.选择数据操作：更新和删除：

首先要在批量修改的方法中定义一个变量存放已被选择的数据（复选框选择的数据）checkedDataSet,一次只能对一条数据进行更新update的操作，可以复选多条记录进行删除：

operateData(type) {const checkedDataSet = this.dataSet.filter(value => value.checked);switch (type) {case 'update':           // 修改// 要控制点击修改按钮时只选中了一条记录if(checkedDataSet.length === 1){     const id = checkedDataSet[0].id;          // 根据id取选中记录的信息this.router.navigate(['../client-add', id], {relativeTo: this.activedRoute});} else {this.message.warning('请选中一条记录进行修改！');}break;case 'delete':         // 删除this.modalService.confirm({nzTitle: '系统提示',nzContent: '您确认删除选中的记录吗？',nzOnOk: () => new Promise((resolve, reject) => {  // Promise 实例一经创建，执行器立即执行this.clientProvider.doDelete(checkedDataSet).subscribe(res => {if(res) {this.notice.success('删除成功');this.searchData();}resolve(true);});}).catch(() => {})                 });break;}
}

其中：Promise 实例一经创建，执行器立即执行，new Promise（function(resolve, reject){}).then(function(value){})，其中Promise中的语句是立即执行的，等到里面调用了resolve函数后才会调用then中的function。then中会默认返回一个空Promise，这个Promise会默认立即执行resolve。也可以自己return一个Promise，等此Promise中调用了resolve后才会继续队列中的then。

Promise可以批量执行：Promise.all([p1,p2,p3]); 当所有子Promise完成后，这个Promise才算完成，返回值是全部值的数组。当有任何一个失败就算失败，返回第一个失败的子Promise。

Promise.race([p1,p2,p3]); 则是只要有一个完成就算完成。

4.上传图片控件在修改状态下回显：

在查看页面，只读属性isReadOnly为true，修改页面，只读属性isReadOnly为false，如果页面上有个“供应商Logo”字段，想在修改页面上可以回显用户上传过的图片，且为可编辑模式，可以这样做：

<div nz-col [nzSpan]="8"><nz-form-item nzFlex><nz-form-label nz-col [nzSpan]="6" nzFor="merchantLogo">供应商LOGO</nz-form-label><nz-form-control nz-col [nzSpan]="6"><span *ngIf="isReadOnly"><img *ngIf="isMerchantLogoImage" src="{{merchantLogoImage}}" class="pre-image" alt="供应商LOGO" (click)="picPreview(merchantLogoImage)"></span><nz-upload *ngIf="!isReadOnly" [nzAction]="image_upload_url" nzListType="picture- card" [nzBeforeUpload]="beforeUpload" [nzAccept]="image_upload_accept" [(nzFileList)]="fileList" [nzShowButton]="fileList.length<1" [nzPreview]="handlePicPreview" (nzChange)="handleChange($event)" [nzHeaders]="requestHeader" [nzRemove]="handleRemove" ><i class="anticon anticon-plus"></i><div class="ant-upload-text">请选择图片</div></nz-upload></nz-form-control><nz-tooltip style="margin-left:16px;"><button nz-button nz-tooltip style="border:none"><i class="anticon anticon-question-circle-o"></i></button><ng-template #nzTemplate><span>请上传10M以内的文件，支持扩展名：.png .jpg .jpeg</span></ng-template></nz-tooltip><nz-form-control nz-col [nzSpan]="8"></nz-form-control></nz-form-item>
</div>

可以看出在查看页面上，直接回显用户曾上传的LOGO即可，可供修改的标签<nz-upload>在这个页面上不显示。而修改页面除了显示上传图片的控件，怎么把用户曾上传的图片放到这个上传的控件中显示呢？这就要在组件中的初始化表单中把上传的图片初始化到fileList中了：

 if (this.isReadOnly) {                                   // 查看页面// 查看状态下的图片回显示if (this.bizMerchantBasic.merchantLogo != null && this.bizMerchantBasic.merchantLogo != '') {this.isMerchantLogoImage = true;this.merchantLogoImage = this.bizMerchantBasic.merchantLogo;}} else {                                               // 修改页面// 编辑状态时回显图片到上传控件里if (this.bizMerchantBasic.merchantLogo) {const file = {id: 1,uid: 1,name: 1,status: 'done',url: this.bizMerchantBasic.merchantLogo,message: 'success'};this.fileList = [file];}}