加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

在单击事件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.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读