angular - ngIf 中的函数在单击事件后被多次调用 - Angular2_Typescript

Question

你好，这是我第一次在 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()”。与按钮 Click 相同的情况。该组件的代码如下:

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()”。

谢谢。

Answer 1

其实很简单。

当你定义一个 ngIf 时，你在里面放了一个表达式对吗？

这意味着每次该组件内部有更新时，Angular 都需要确保对 ngIf 中的表达式进行求值。 (这就是您对 Angular 的期望吧？否则您为什么要使用 ngIf ？)

因此每次模型中有更新时，或者更确切地说，每次有触发 changeDetection 的东西时，Angular 都会计算该表达式，在您的例子中它是一个函数 (isUploaderEmpty)。

通常，事件是触发 changeDetection 的事件之一(比这更复杂)。

这就是为什么 :D。