Angular 4：为什么我不能在ngOnInit（）中调用公共函数？

Question

So I've got the following code in my ngOnInit():

ngOnInit() {
$('#inputForm').submit(function(e) {
  e.preventDefault();

  this.uploadFormData();
});

$('#fileUpload').on('change', function() {
  const fileString = $('#fileUpload').val();
  const fileType = $('#fileUpload').prop('files')[0].type;

  if (fileType !== 'text/xml') {
    $('#message').html('File to upload must be an XML file!!!');
    if (!$('#message').hasClass('error')) {
      $('#message').addClass('error');
    }
  } else {
    $('#message').html('File to upload is an XML file!!!');
    if ($('#message').hasClass('error')) {
      $('#message').removeClass('error');
    }
    $('#message').addClass('correctFile');
  }
});

}

This will watch for the onchange event & when I submit my form. When I submit my form, I want to call a public function that's outside of this ngOnInit(), and it looks like this:

public uploadFormdata(): void {
  const form = $('#inputForm').val();
  const files = ($('#fileUpload') as any).files;
  const formData = new FormData();
  const file = files[0];

  formData.append('tenant', form[0]);
  formData.append('title', form[1]);
  formData.append('file', file, file.name);
  this.uploadService.uploadForm(formData)
    .subscribe(res => this.fileUploaded(res));
}  

Why won't "this.uploadFormData()" in my ngOnInit() work? It says "property 'uploadFormData' does not exist on type 'HTMLElement'".

Answer 1

Use the arrow function, so that this refers to your component's class. If you don't, this will refer to the DOM element on which you bound the event, ie the inputForm field

$('#inputForm').submit(e => {
  e.preventDefault();

  this.uploadFormData();
});

Note : you should really avoid using jQuery for manipulating the DOM, as angular is not aware of changes caused by jQuery.

Answer 2

Because, this context into your sumbit form refered the $('#inputForm') not the class of your component. In your situation, you have to save your context this into variable

ngOnInit() {
  const $this = this;
  $('#inputForm').submit(function(e) {
    e.preventDefault();

    $this.uploadFormData();
  });
  // ...
}

Or you should use arrow function:

  ngOnInit() {
      $('#inputForm').submit((e) => {
        e.preventDefault();

        this.uploadFormData();
      });
      // ...
   }

Answer 3

View elements only load after " OnInit ", you can use AfterViewInit

 ngAfterViewInit() { $('#inputForm').submit(function(e) { e.preventDefault(); this.uploadFormData(); }); } 

Use Element ref instead of ordinary JavaScript/ jQuery selector