未捕获的ReferenceError：函数未使用带有角形式和js的onclick定义

Question

I've tried a few different ways to solve this but no luck: 我尝试了几种不同的方法来解决此问题，但没有运气：

put script on same html page 将脚本放在相同的html页面上
added event listener 添加了事件监听器
moved script inside body function 身体功能内移动的脚本
adjusting <script src=""></script> 调整<script src=""></script>

Using Developer tools it looks like I'm hitting my onclick function in the html file but it's not hitting my js file. 使用开发人员工具，好像我在html文件中命中了onclick函数，但没有命中我的js文件。

component html file 组件html文件

    <body>
    <form (ngSubmit)="onSubmit(f)" #f="ngForm">
    <div class="row">
      <div class="col-lg-12 form-group">
      <label for="email">Email</label>
      <input
        type="email"
        id="email"
        class="form-control"
        name="email"
        ngModel
        required
        [pattern]="'^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$'"
        >
    </div>
      <div class="row moveRight">
        <div class="col-lg-12 form-group">
      <label for="firstname">First Name</label>
      <input
        type="text"
        id="firstname"
        class="form-control"
        name="firstname"
        ngModel
        required
        >
      </div>
      </div>
      <div class="row moveRight">
        <div class="col-lg-12 form-group">
          <label for="lastname">Last Name</label>
          <input
            type="text"
            id="lastname"
            class="form-control"
            name="lastname"
            ngModel
            required
            >
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12">
          <button class="btn btn-success" id="startnode" type="submit" [disabled]="!f.valid" onclick="submitform()">Submit</button>
        </div>
      </div>
    </div>
  </form>
  <script type="text/javascript" src="form.js">
  </script>
</body>

js file js文件

$(document).ready(function(){

  function submitform() {

var https = require('https');
var querystring = require('querystring');

var postData = querystring.stringify({
  'email': req.body.email,
  'firstname': req.body.firstname,
  'lastname': req.body.lastname,
  'hs_context': JSON.stringify({
    "hutk": req.cookies.hubspotutk,
    "ipAddress": req.headers['x-forwarded-for'] || req.connection.remoteAddress,
    "pageUrl": "http://hubspot-form-for-interview-boston.s3-website.us-east-2.amazonaws.com/",
    "pageName": "Example Title"
  })
});


var options = {
  hostname: 'forms.hubspot.com',
  path: '/uploads/form/v2/HUBID/FORMID',
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Content-Length': postData.length
  }
}


var request = https.request(options, function (response) {
  console.log("Status: " + response.statusCode);
  console.log("Headers: " + JSON.stringify(response.headers));
  response.setEncoding('utf8');
  response.on('data', function (chunk) {
    console.log('Body: ' + chunk)
  });
});

request.on('error', function (e) {
  console.log("Problem with request " + e.message)
});


request.write(postData);
request.end();
  }


});

document.getElementById ("startnode").addEventListener ("click", submitform, false);

Answer 1

In Angular, we normally put our data access code in a service. 在Angular中，我们通常将数据访问代码放入服务中。 Here is an example: 这是一个例子：

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/map';

import { IProduct } from './product';

@Injectable()
export class ProductService {
    private baseUrl = 'api/products';

    constructor(private http: Http) { }

    saveProduct(product: IProduct): Observable<IProduct> {
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        const url = `${this.baseUrl}/${product.id}`;
        return this.http.put(url, product, options)
            .map(() => product)
            .do(data => console.log('updateProduct: ' + JSON.stringify(data)))
            .catch(this.handleError);
    }

    private handleError(error: Response): Observable<any> {
        // in a real world app, we may send the server to some remote logging infrastructure
        // instead of just logging it to the console
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }
}

And then the component calls this service to save data: 然后组件调用此服务以保存数据：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { IProduct } from './product';
import { ProductService } from './product.service';

@Component({
    templateUrl: './app/products/product-edit.component.html',
    styleUrls: ['./app/products/product-edit.component.css']
})
export class ProductEditComponent implements OnInit {
    pageTitle: string = 'Product Edit';
    errorMessage: string;
    product: IProduct;

    constructor(private router: Router,
        private productService: ProductService) { }

    saveProduct(): void {
        if (this.isValid(null)) {
            this.productService.saveProduct(this.product)
                .subscribe(
                    () => this.onSaveComplete(`${this.product.productName} was saved`),
                    (error: any) => this.errorMessage = <any>error
                );
        } else {
            this.errorMessage = 'Please correct the validation errors.';
        }
    }

    onSaveComplete(message?: string): void {
        // Navigate back to the product list
        this.router.navigate(['/products']);
    }

}

未捕获的ReferenceError：函数未使用带有角形式和js的onclick定义

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-08-25 19:39:59

未捕获的ReferenceError：函数未使用带有角形式和js的onclick定义

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-08-25 19:39:59

解决方案1
1 已采纳 2017-08-25 19:39:59