Question

所以我在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');
  }
});

}

这将关注onchange事件＆amp;当我提交表格时当我提交表单时，我想调用一个不在此ngOnInit（）之外的公共函数，它看起来像这样：

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));
}

为什么赢得了＆＃34; this.uploadFormData（）＆＃34;在我的ngOnInit（）工作？它说＆＃34; property＆＃39; uploadFormData＆＃39;类型＆＃39; HTMLElement＆＃39;＆＃34;。

上不存在

Answer 1

使用箭头功能，以便this引用您的组件的类。如果你不这样做，这将引用你绑定事件的DOM元素，即inputForm字段

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

  this.uploadFormData();
});

注意：你应该真的避免使用jQuery来操作DOM，因为angular不知道jQuery引起的变化。

Answer 2

因为汇总表单中的this上下文提到了$('#inputForm')而不是组件的类。在您的情况下，您必须将上下文this保存到变量

中

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

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

或者您应该使用箭头功能：

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

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

Answer 3

查看元素仅在＆＃34;之后加载OnInit＆＃34;，您可以使用 AfterViewInit

＆＃13;

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

＆＃13;

使用Element ref代替普通的JavaScript / jQuery选择器

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

3 个答案: