在单击事件Angular2_Typescript之后,多次调用ngIf内的函数
发布时间:2020-12-17 18:09:56 所属栏目:安全 来源:网络整理
导读:您好,这是我第一次在stackoverflow上提问. 我正在开发angular2:v2.1.0(typescript-v2.0.10)中的应用程序.我使用“ng2-file-upload”进行文件上传. HTML代码如下: div class="container-fluid" h5 class="titleCenter" File Upload /h5 div class="drop-zon
|
您好,这是我第一次在stackoverflow上提问.
我正在开发angular2:v2.1.0(typescript-v2.0.10)中的应用程序.我使用“ng2-file-upload”进行文件上传. HTML代码如下: <div class="container-fluid">
<h5 class="titleCenter"> File Upload </h5>
<div class="drop-zone" ng2FileDrop
[ngClass]="{'nv-file-over': hasBaseDropZoneOver,'pointerBan': testDisablDropZone}"
(fileOver)="fileOverBase($event)"
[uploader]="uploader">
<span *ngIf="isUploaderEmpty(uploader.queue)">Drop Down box for the CSV file only...!!!</span>
<span *ngFor="let item of uploader.queue" >
<p class="row" >
<i class="fileIcon"></i>
<strong>{{ item?.file?.name }}</strong>
<a class="fileUploadRemoveButton fa fa-times-circle" (click)="item.remove()"></a>
</p>
</span>
</div>
<div [ngClass]="{'activeCheckButton': testDisablDropZone}" class="CheckboxZone" (click)="disableDropZone($event)" style="margin-top: 10px">
<span>Click here to disable the dropdown box.</span>
</div>
</div>
<button type="button" (click)="test($event)">click</button>
这里当我点击带有’CheckboxZone’类的div时,它会调用函数’disableDropZone($event)’,但之后它也会调用函数’idUploadEmpty()’.按钮的情况相同也点击. const URL = 'https://evening-anchorage-3159.herokuapp.com/api/';
@Component({
selector: 'fileupload',templateUrl: './fileupload.component.html',styleUrls: ['./fileupload.component.scss']
})
export default class FileuploadComponent {
public uploader:FileUploader = new FileUploader({url: URL,autoUpload:true,allowedMimeType:['text/csv'] });
public hasBaseDropZoneOver:boolean = false;
public hasAnotherDropZoneOver:boolean = false;
private fileType =['json'];
private flagFile = false;
private testDisablDropZone = false;
private fileNotAccepted = false;
public fileOverBase(e:any):void {
this.hasBaseDropZoneOver = e;
console.log('EVENT fileOverBase : ',e);
}
public fileOverAnother(e:any):void {
this.hasAnotherDropZoneOver = e;
console.log('fileOverAnother : ',e);
}
isUploaderEmpty (uploaderQueue): boolean {
console.log('Queue pqssed from View : ',this.uploader.queue);
let qLength = uploaderQueue.length;
if(uploaderQueue.length==0){
this.fileNotAccepted = true;
return true;}
if (qLength > 1){
uploaderQueue.pop();
this.flagFile = true;
let timer = Observable.timer(3000,10000);
timer.subscribe(t=>{
this.flagFile = false
});
}
return false;
}
disableDropZone () {
console.log('disableDropZone clicked...!!!');
this.testDisablDropZone =! this.testDisablDropZone;
}
test(event) {
console.log('OK')
}
}
很难理解为什么它会在触发事件时一直调用函数’isUploaderEmpty()’. 谢谢. 解决方法
这实际上非常简单.
什么时候定义一个ngIf,你把一个表达式放在里面吗? 这意味着每次在该组件内部进行更新时,Angular需要确保评估ngIf中的表达式. (这是你对Angular的期望吗?其他明智的为什么你会使用ngIf?) 因此,每当模型中有更新时,或者更确切地说,每次有触发changeDetection的内容时,Angular都会计算该表达式,在您的情况下,该表达式是一个函数(isUploaderEmpty). 通常,事件是触发changeDetection的事情之一(它比这更复杂). 这就是为什么:D. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- twitter-bootstrap – twitter bootstrap datepicker国际化
- 构建SNMP协议的Walk请求
- angularjs – 如果父项具有ng-if,则Angular ng-show不起作用
- Bootstrap Tree View,简单而优雅的树结构组件
- 一切都是Scala中的一个对象
- scala – 使用future将仅限副作用的函数转换为异步.哪种退货
- angularjs+bootstrap 写轮播效果
- 怎样提高WebService性能大数据量网络传输处理
- 同一个文件在windows和linux下计算md5哈希不一致的原因及解
- 如何在使用vim创建新文件时自动添加一些框架代码
