在单击事件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创建新文件时自动添加一些框架代码