一次单击事件后,多次调用ngIf内部的函数-Angular2_Typescript [英] Function inside ngIf is called multiple times, after a single click event- Angular2_Typescript
问题描述
您好,这是我第一次对Stackoverflow提出问题. 我正在用angular2开发一个应用程序:v2.1.0(打字稿-v2.0.10).我正在使用"ng2-file-upload"上传文件. HTML代码如下:
Hello this is the first time I qm putting question on stackoverflow. I am developing an application in angular2: v2.1.0 (typescript- v2.0.10). I am using "ng2-file-upload" for file upload. The HTML code is as follows:
<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()'.相同的情况下,单击按钮也是如此. 该组件的代码如下:
Here when I clicked on the div with the class 'CheckboxZone' it calls the function 'disableDropZone($event)' but after that it calls the function 'idUploadEmpty()' too. The same case with the button Click too. The code of the component is as follows:
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()".
Hard to understand why it is calling the function 'isUploaderEmpty()' all the time when an event is triggered.
谢谢.
推荐答案
实际上很容易.
无论何时定义 ngIf ,您都将表达式放在其中吧?
When ever you define an ngIf , you put an expression inside it right ?
这意味着每次该组件内部进行更新时,Angular需要确保对ngIf
内部的表达式进行求值. (这是您对Angular的期望?否则,您为什么要使用ngIf
?)
That means every time there is an update inside that component , Angular needs to make sure that the expression inside the ngIf
is evaluated. ( This is what you expect from Angular right ? other wise why would you use ngIf
?)
因此,每当模型中有一个更新,或更确切地说,每当有一个触发changeDetection的东西时,Angular都会对该表达式进行求值,在您的情况下,该表达式是一个函数(isUploaderEmpty).
So every time there is an update in the model , or rather , every time there is something that triggers the changeDetection, Angular evaluates that expression , which in your case is a function ( isUploaderEmpty ).
通常,事件是触发changeDetection的事情之一(比这要复杂得多).
Generally , events are one of the things that fire a changeDetection( it's more complicated than this ).
这就是为什么:D.
这篇关于一次单击事件后,多次调用ngIf内部的函数-Angular2_Typescript的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!