如何从 Javascript 读取和写入 Angular 组件变量？

Question

我已经创建了一个带有表单和文件上传器的组件。

我需要修改一个打字稿变量以禁用"Done" 按钮。我的意思是，我需要防止我的表单在上传完成之前提交。

代码：

（跟随上传变量）

import { Component, OnInit} from '@angular/core';
declare var $: any;

@Component({
    selector: 'app-child-add-moment',
    templateUrl: './child-add-moment.component.html',
    styleUrls: ['./child-add-moment.component.css']

})
export class ChildAddMomentComponent implements OnInit {

    private FILE_UPLOAD_URL = 'http://localhost/uploader/ajax_upload_file.php';

    uploading = false;
    uploadedFiles = 0; // I need change this variable from $('#filer_input2') success function

    constructor() { }

    ngOnInit() {
        this.initializeUploader();
    }

    initializeUploader(): void {

        $('#filer_input2').filer({
            changeInput: '<a class="btn btn-primary">Add photo</a>',
            showThumbs: true,
            theme: 'dragdropbox',
            templates: {
            box: '<ul class="jFiler-items-list jFiler-items-grid"></ul>',
            item: '<li class="jFiler-item">{{fi-name}}</li>',
            itemAppend: '<li class="jFiler-item">{{fi-name}}</li>',
            progressBar: '<div class="bar"></div>',
            itemAppendToEnd: false,
            canvasImage: true,
            removeConfirmation: true,
            _selectors: {
                list: '.jFiler-items-list',
                item: '.jFiler-item',
                progressBar: '.bar',
                remove: '.jFiler-item-trash-action'
            }
        },
        uploadFile: {
            url: this.FILE_UPLOAD_URL,
            data: null,
            type: 'POST',
            enctype: 'multipart/form-data',
            synchron: true,
            beforeSend: function() {

                // This show FALSE value but this value is not from "uploading" var from the component. 
                console.log(this.uploading);

                if (!this.uploading) {
                    this.uploadedFiles = 0;
                }

                // I set this variable to TRUE to DISABLE some buttos from my template. But this setter, dont change the value of the "uploading" variable from the component.
                this.uploading = true;

            },
            success: function(data, itemEl, listEl, boxEl, newInputEl, inputEl, id)
            {
                this.uploadedFiles++;

                const filerKit = inputEl.prop('jFiler');

                filerKit.files_list[id].name = new_file_name;

                if (filerKit.files_list.length === this.uploadedFiles) {
                    console.log('All files have been uploaded');

                    // When upload has been finished, I set this variable to FALSE to ENABLE some buttons again.
                    this.uploading = false;

                    this.uploadedFiles = 0;
                }

            },
            error: null,
            onComplete: null
        },   
        dialogs: null,
        captions: {
            button: 'Choose Files',
            feedback: '"Choose files To Upload',
            feedback2: 'files were chosen',
            drop: 'Drop file here to Upload',
            removeConfirmation: '"Are you sure you want to remove this file?',
            errors: null
        }
    });

}

如何从“beforeSend”和“success”函数修改“uploading”变量？

重要的一点：我想将我的 var“上传”与模板绑定。

用于启用和禁用按钮：

<button type="button" class="btn btn-primary" [class.disabled]="uploading"> Add </button>

谢谢

Answer 1

您需要在类方法中保存对该类的引用，然后从回调中调用它：

在类方法级别：

export class ChildAddMomentComponent implements OnInit {
    uploading = false;

    initializeUploader(): void {
        var self = this;
        // some code
    }
}

在你的回调中：

  self.uploading = true;