ngIf函數在單擊事件後被多次調用 - Angular2_Typescript

您好，這是我第一次把問題放在stackoverflow上。我正在開發angular2：v2.1.0（typescript-v2.0.10）中的應用程序。我正在使用「ng2-file-upload」進行文件上傳。該HTML代碼如下：ngIf函數在單擊事件後被多次調用 - Angular2_Typescript

<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」它調用函數「disableDropZone（$事件）」在div但之後它調用函數「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（）」事件被觸發時，所有的時間。

謝謝。

來源

2016-12-20 NRJ

這其實很簡單。

當你定義一個ngIf時，你在裏面放置一個表達式吧？

這意味着每當組件中有更新時，Angular需要確保評估ngIf中的表達式。（這是你對Angular Right的期望嗎？另外明智的是爲什麼你會使用ngIf？）

因此，每當模型中有更新時，或者更確切地說，每次觸發changeDetection時，Angular會評估表達式，在你的情況下是一個函數（isUploaderEmpty）。

一般來說，事件是觸發changeDetection的事情之一（它比這更復雜）。

所以這就是爲什麼：D。

來源

2016-12-20 12:03:53 Milad

你是對的。考慮到你的解釋，我改變了我的代碼。我將該變量傳遞給ngIf而不是傳遞該函數並解決問題。：D – NRJ

很酷，這是公認的答案嗎？ – Milad

是的它確實。我剛剛嘗試過。但我想知道如果Ig想在組件中使用ngIf兩次，那麼我該怎麼做？進行函數調用還是其他方法會很方便嗎？ – NRJ

ngIf函數在單擊事件後被多次調用 - Angular2_Typescript

回答

相關問題